<!DOCTYPE html>
<html  lang="zh">
<head><link rel=manifest href=/manifest.json>
    <meta charset="utf-8" />

<meta name="generator" content="Hexo 4.1.1" />

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

 <!-- pwa 配置-->
 <link rel="apple-touch-icon" href="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.7/pwa/apple-touch-icon.png">
 <meta name="theme-color" content="white"/>
 <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">


<title>JavaScript基础教程 - Fox - Future diary</title>


    <meta name="description" content="1、JavaScript介绍JavaScript是目前所有主流浏览器上唯一支持的脚本语言，这也是早期JavaScript的唯一用途。其主要作用是在不与服务器交互的情况下修改HTML页面内容，因此其最关键的部分是DOM（文档对象模型），也就是HTML元素的结构。通过Ajax可以使HTML页面通过JavaScript，在不重新加载页面的情况下从服务器上获取数据并显示，大幅提高用户体验。通过JavaSc">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript基础教程">
<meta property="og:url" content="https://foxhuli.top/posts/cdf9.html">
<meta property="og:site_name" content="Fox - Future diary">
<meta property="og:description" content="1、JavaScript介绍JavaScript是目前所有主流浏览器上唯一支持的脚本语言，这也是早期JavaScript的唯一用途。其主要作用是在不与服务器交互的情况下修改HTML页面内容，因此其最关键的部分是DOM（文档对象模型），也就是HTML元素的结构。通过Ajax可以使HTML页面通过JavaScript，在不重新加载页面的情况下从服务器上获取数据并显示，大幅提高用户体验。通过JavaSc">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://cdn.jsdelivr.net/gh/foxhuli229/blog-imgs/articles/%E5%89%8D%E7%AB%AF/JavaScript/hexoblog_20180914_js.jpg">
<meta property="article:published_time" content="2020-03-13T16:12:00.000Z">
<meta property="article:modified_time" content="2020-03-18T10:37:32.099Z">
<meta property="article:author" content="Fox">
<meta property="article:tag" content="JavaScript">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://cdn.jsdelivr.net/gh/foxhuli229/blog-imgs/articles/%E5%89%8D%E7%AB%AF/JavaScript/hexoblog_20180914_js.jpg">



<link rel="canonical" href="https://foxhuli.top/" />





<link rel="icon" href="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.6/images/foxfavicon.png">


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.7.2/css/bulma.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu:400,600|Source+Code+Pro">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.12.0/styles/atom-one-dark.css">


    
    
<style>body>.footer,body>.navbar,body>.section{opacity:0}</style>

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/css/lightgallery.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/css/justifiedGallery.min.css">

    
    
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.css">

    
    
    
    
<link rel="stylesheet" href="/css/back-to-top.css">

    
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-160296449-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-160296449-1');
</script>

    
    <script>
var _hmt = _hmt || [];
(function() {
    var hm = document.createElement("script");
    hm.src = "//hm.baidu.com/hm.js?14528986";
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
})();
</script>
    
    
    
    <link rel="stylesheet" href="/css/progressbar.css">
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
    
    <script async="" src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    


<link rel="stylesheet" href="/css/style.css">

<link rel="alternate" href="/atom.xml" title="Fox - Future diary" type="application/atom+xml">
</head>
<body class="is-3-column">
    <nav class="navbar navbar-main">
    <div class="container">
        <div class="navbar-brand is-flex-center">
            <a class="navbar-item navbar-logo" href="/">
                <div>
                    
                        <img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.5/images/foxlogo.png" alt="JavaScript基础教程" height="28">
                    
                </div>
            </a>
        </div>
        <div class="navbar-menu">
            
            <div class="navbar-start">
                
                <a class="navbar-item"
                href="/">首页</a>
                
                <a class="navbar-item"
                href="/archives">归档</a>
                
                <a class="navbar-item"
                href="/categories">分类</a>
                
                <a class="navbar-item"
                href="/tags">标签</a>
                
                <a class="navbar-item"
                href="/contact">留言板</a>
                
                <a class="navbar-item"
                href="/friends">友情链接</a>
                
                <a class="navbar-item"
                href="/about">关于</a>
                
            </div>
            
            <div class="navbar-end">
                
                
                <a class="navbar-item is-hidden-tablet catalogue" title="目录" href="javascript:;">
                    <i class="fas fa-list-ul"></i>
                </a>
                
                
                <a class="navbar-item search" title="搜索" href="javascript:;">
                    <i class="fas fa-search"></i>
                </a>
                
            </div>
        </div>
    </div>
</nav>
    


    <section class="section">
        <div class="container">
            <div class="columns">
                <div class="column is-8-tablet is-8-desktop is-6-widescreen has-order-2 column-main">
<div class="card">
    
    <div class="card-image">
        <span  class="image is-7by1">
            <img class="thumbnail" src="https://cdn.jsdelivr.net/gh/foxhuli229/blog-imgs/articles/%E5%89%8D%E7%AB%AF/JavaScript/hexoblog_20180914_js.jpg" alt="JavaScript基础教程">
        </span>
    </div>
    
    <div class="card-content article ">
        
        <div class="level article-meta is-size-7 is-uppercase is-mobile is-overflow-x-auto">
            <div class="level-left">
                <time class="level-item has-text-grey" datetime="2020-03-13T16:12:00.000Z">2020-03-14</time>
                
                <div class="level-item">
                <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a>
                </div>
                
                
                <span class="level-item has-text-grey">
                    
                    
                    1 小时 读完 (大约 9695 个字)
                </span>
                
                
                <span class="level-item has-text-grey" id="busuanzi_container_page_pv">
                    <i class="far fa-eye"></i>
                    的 <span id="busuanzi_value_page_pv">0</span> 次陪伴
                </span>
                
            </div>
        </div>
        
        <h1 class="title is-size-3 is-size-4-mobile has-text-weight-normal">
            
                JavaScript基础教程
            
        </h1>
        <div class="content">
            <h2 id="1、JavaScript介绍"><a href="#1、JavaScript介绍" class="headerlink" title="1、JavaScript介绍"></a>1、JavaScript介绍</h2><p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript">JavaScript</a>是目前所有主流浏览器上唯一支持的脚本语言，这也是早期<code>JavaScript</code>的唯一用途。其主要作用是在不与服务器交互的情况下修改<code>HTML</code>页面内容，因此其最关键的部分是<code>DOM</code>（文档对象模型），也就是<code>HTML</code>元素的结构。通过<code>Ajax</code>可以使<code>HTML</code>页面通过<code>JavaScript</code>，在不重新加载页面的情况下从服务器上获取数据并显示，大幅提高用户体验。通过<code>JavaScript</code>，使<code>Web</code>页面发展成胖客户端成为可能。</p>
<a id="more"></a>
<h3 id="1-1-语言的性质"><a href="#1-1-语言的性质" class="headerlink" title="1.1 语言的性质"></a>1.1 语言的性质</h3><p>本节对<code>JavaScript</code>的性质做简要介绍，以帮你理解一些疑问。</p>
<p><code>JavaScript</code>和<code>ECMAScript</code>（JavaScript versus ECMAScript）<br>编程语言称为<code>JavaScript</code>，语言标准被称为<code>ECMAScript</code>。他们有不同名字的原因是因为“Java”已经被注册为商标（属于Oracle）。目前，只有<code>Mozilla</code>被正式允许使用“JavaScript”名称，因为很久以前他们得到一份许可。因此，开放的语言标准拥有不同的名字。当前的<code>JavaScript</code>版本是<code>ECMAScript 6</code>，<code>ECMAScript 7</code>当前是开发版。</p>
<p><code>JavaScript</code>之父，<code>Brendan Eich</code><a href="https://yanhaijing.com/javascript/2013/06/22/javascript-designing-a-language-in-10-days/">迅速了创建一门编程语言</a>。（否则，Netscape将使用其他技术）。他借鉴了几门其他语言的一些特性：</p>
<ul>
<li>JavaScript借鉴了Java的语法和如何区分原始值和对象。</li>
<li>JavaScript的函数设计受Scheme和AWK的启发——他们（的函数）都是第一类（first-class）对象，并且在语言中广泛使用。闭包使他们（函数）变成强大的工具。</li>
<li>Self影响了JavaScript独一无二的面向对象编程(OOP)风格。它的核心思想（在这里我们没有提到）非常优雅，基于此创建的语言非常少。但后面会提到一个简单的模式照顾大部分用例。JavaScript面向对象编程的杀手级特性是你可以直接创建对象。不需要先创建类或其他类似的东西。</li>
<li>Perl和Python影响了JavaScript字符串，数组和正则表达式的操作。</li>
</ul>
<p><code>JavaScript</code>在最初的时候并不是一个完善的语言，因此也导致<code>JavaScript</code>遗留了很多令人诟病的问题。在开发稍大规模的应用时会显得力不从心，但是由于<code>JavaScript</code>本身是一种非常灵活的语言，因此在它的基础上开发程序库比较容易，因此出现了一大批非常优秀的第三方库，如<a href="https://extjs.org.cn/">jQuery</a>，[ExtJS][4]，<a href="https://underscorejs.org/">underscorejs</a>，<a href="https://backbonejs.org/">backbone</a>等等，由于这些第三方库，<code>JavaScript</code>变得非常简单。其中<code>jQuery</code>的使用非常广泛，它大幅简化了<code>DOM</code>和<code>Ajax</code>，已经成为了很多网站的标配。<code>jQuery</code>虽然基于<code>JavaScript</code>，但它提供了另外一种编程范式，也就是逻辑式编程，与<code>SQL</code>和正则表达式类似。</p>
<h3 id="1-2-JavaScript能做什么"><a href="#1-2-JavaScript能做什么" class="headerlink" title="1.2 JavaScript能做什么"></a>1.2 JavaScript能做什么</h3><p><img src="https://cdn.jsdelivr.net/gh/foxhuli229/blog-imgs/articles/%E5%89%8D%E7%AB%AF/JavaScript/js1.png" alt="JavaScript项目在Github所占比例"></p>
<p>如上图，<code>JavaScript</code>作为<a href="https://github.com/">Github</a>上最流行、最火的编程语言，几乎无所不能。这里是<a href="https://segmentfault.com/u/puyart">PuYart</a>的关于<a href="https://segmentfault.com/a/1190000003767058"><code>JavaScript</code>就要统治世界了</a>的文章，可以让我们了解<code>JavaScript</code>到底能做什么的一些介绍。</p>
<ol>
<li>Web前端(各种前端工具类库、前端框架、动画效果、数据可视化等)</li>
<li>服务端开发(<a href="https://nodejs.org/">Node.js</a>)</li>
<li>移动应用或者<code>Hybrid App</code>(Cordova)</li>
<li>桌面应用(<a href="https://nwjs.io/">NW.js</a>、<a href="https://electron.atom.io/">Electron</a>)</li>
<li>游戏(<a href="https://unity3d.com/cn/">Unity3D</a>、<a href="https://www.cocos.com/doc/article/index?type=cocos2d-x&amp;url=/doc/cocos-docs-master/manual/framework/cocos2d-js/catalog/../1-about-cocos2d-js/1-1-a-brief-history/zh.md">Cocos2d-js</a>、<a href="https://pomelo.netease.com/">Pomelo</a>)</li>
<li>VR(<a href="https://www.phodal.com/blog/why-javascript-will-use-vr-world/">JavaScript在VR世界的应用</a>)</li>
<li>硬件、嵌入式物联网等(<a href="https://blog.jobbole.com/46055/">Tessel：用JavaScript做嵌入式开发</a>)</li>
<li>操作系统(<a href="https://node-os.com/">NodeOS</a>)</li>
</ol>
<blockquote>
<p>Atwood’s Law: any application that can be written in JavaScript, will eventually be written in JavaScript.(Atwood定律：凡是能用JavaScript写出来的，最终都会用JavaScript写出来。)</p>
</blockquote>
<h2 id="2、-JavaScript语法"><a href="#2、-JavaScript语法" class="headerlink" title="2、 JavaScript语法"></a>2、 JavaScript语法</h2><h3 id="2-1-语句和表达式"><a href="#2-1-语句和表达式" class="headerlink" title="2.1 语句和表达式"></a>2.1 语句和表达式</h3><p>了解<code>JavaScript</code>的语法，先来了解两个主要的语法类型：语句和表达式。</p>
<ul>
<li>语句通常是“做某些事情”。程序是一组语句的序列。举个例子，下面声明（创建）一个变量 <code>foo</code>：</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> foo;</span><br></pre></td></tr></tbody></table></figure>
<ul>
<li>表达式是产生“值”。他们通常位于赋值操作的右边、函数参数等。举个例子：</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">3</span> * <span class="number">7</span></span><br></pre></td></tr></tbody></table></figure>
<p>语句和表达式之间的区别最好通过实例说明，<code>JavaScript</code>（像Java）有两种不同的方式实现<code>if-then-else</code>。一种是用语句：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x;</span><br><span class="line"><span class="keyword">if</span> (y &gt;= <span class="number">0</span>) {</span><br><span class="line">    x = y;</span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line">    x = -y;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>另一种是表达式：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = y &gt;= <span class="number">0</span> ? y : -y;</span><br></pre></td></tr></tbody></table></figure>
<p>你可以将后者作为函数参数（但前者不行）：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">myFunction(y &gt;= <span class="number">0</span> ? y : -y)</span><br></pre></td></tr></tbody></table></figure>
<p>最后，每当<code>JavaScript</code>期待一个语句，你也可以用一个表达式代替。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">foo(bar(<span class="number">7</span>, <span class="number">1</span>));</span><br></pre></td></tr></tbody></table></figure>
<p><code>foo(...);</code>是一个语句（也叫做表达式语句），<code>bar(7, 1)</code>则是一个表达式。他们都实现函数调用。</p>
<h3 id="2-2-流程控制语句和语句块"><a href="#2-2-流程控制语句和语句块" class="headerlink" title="2.2 流程控制语句和语句块"></a>2.2 流程控制语句和语句块</h3><p>流程控制语句，其语句体可以是单条语句。举两个例子：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (obj !== <span class="literal">null</span>) obj.foo();</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span> (x &gt; <span class="number">0</span>) x--;</span><br></pre></td></tr></tbody></table></figure>
<p>然而，任何语句总能被语句块代替，花括号包含零或多条语句。因此，你也可以这样写：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (obj !== <span class="literal">null</span>) {</span><br><span class="line">    obj.foo();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">while</span> (x &gt; <span class="number">0</span>) {</span><br><span class="line">    x--;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>为便于程序的阅读和维护，推荐使用后一种方式，即语句块方式。</p>
<h3 id="2-3-分号"><a href="#2-3-分号" class="headerlink" title="2.3 分号"></a>2.3 分号</h3><p><code>JavaScript</code>中的分号是<a href="https://www.2ality.com/2011/05/semicolon-insertion.html">可选的</a>。但省略（分号）可能会带来意想不到的结果，所以我建议还是写上分号。</p>
<p>正如上面所看到的，分号作为语句的结尾，但语句块不需要。仅有一种情况下你能看到语句块后面有分号——<strong>函数表达式后面的函数体块</strong>。<strong>表达式作为语句的结尾，后面是分号</strong>：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="number">3</span> * <span class="number">7</span>;</span><br><span class="line"><span class="keyword">var</span> f = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ };</span><br></pre></td></tr></tbody></table></figure>
<h3 id="2-4-注释"><a href="#2-4-注释" class="headerlink" title="2.4 注释"></a>2.4 注释</h3><p><code>JavaScript</code>的注释有两种形式：单行注释和多行注释。单行注释以<code>//</code>开头，以换行符结尾：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">x++; <span class="comment">// 单行（single-line）注释</span></span><br></pre></td></tr></tbody></table></figure>
<p>多行注释用<code>/**/</code>包裹</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> 这是多行注释</span></span><br><span class="line"><span class="comment"> 多行哦</span></span><br><span class="line"><span class="comment"> */</span></span><br></pre></td></tr></tbody></table></figure>
<h2 id="3、变量和赋值"><a href="#3、变量和赋值" class="headerlink" title="3、变量和赋值"></a>3、变量和赋值</h2><p><code>JavaScript</code>中的变量在使用前必须先声明，否则会报错引用错误（Reference Error）：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> foo;  <span class="comment">// 声明变量“foo”</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="3-1-赋值"><a href="#3-1-赋值" class="headerlink" title="3.1 赋值"></a>3.1 赋值</h3><p>你可以在声明变量的同时为其赋值：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> foo = <span class="number">6</span>;</span><br></pre></td></tr></tbody></table></figure>
<p>你也可以给已经存在的变量重新赋值：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">foo = <span class="number">4</span>;  <span class="comment">// 更改变量的值</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="3-2-复合赋值操作符"><a href="#3-2-复合赋值操作符" class="headerlink" title="3.2 复合赋值操作符"></a>3.2 复合赋值操作符</h3><p>有很多复合赋值操作符，例如+=。下面的两个赋值操作等价：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">x += <span class="number">1</span>;</span><br><span class="line">x = x + <span class="number">1</span>;</span><br></pre></td></tr></tbody></table></figure>
<h3 id="3-3-标识符和变量名"><a href="#3-3-标识符和变量名" class="headerlink" title="3.3 标识符和变量名"></a>3.3 标识符和变量名</h3><p>标识符就是事物的名字，在<code>JavaScript</code>中他们扮演不同的语法角色。例如，变量的名称是一个标识符。</p>
<p>大体上，标识符的第一个字符可以是任何<code>Unicode</code>字符、美元标志符（$）或下划线（_）。后面可以是任意字符和数字。因此，下面全是合法的标识符：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">arg0</span><br><span class="line">_tmp</span><br><span class="line">$elem</span><br><span class="line">π</span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p><strong>注意</strong>：首字符不能是数字，如果是数字的话，该如何区分是数字还是变量呢？</p>
</blockquote>
<p>一些标识符是“保留关键字”——他们是语法的一部分，不能用作变量名。从技术上讲，下面三个标识符不是保留字，但也不应该作为变量名：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">Infinity</span> <span class="literal">NaN</span> <span class="literal">undefined</span></span><br></pre></td></tr></tbody></table></figure>
<h2 id="4、值"><a href="#4、值" class="headerlink" title="4、值"></a>4、值</h2><p><code>JavaScript</code>有所有我们期待的编程语言值类型：布尔，数字，字符串，数组等。<code>JavaScript</code>中的所有值都有属性。每个属性有一个键（或名字）和一个值。你可以使用点（.）操作符读取属性：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">value.propKey</span><br></pre></td></tr></tbody></table></figure>
<p>举个例子：字符串<code>abc</code>有属性<code>lenght</code>（长度）</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'abc'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str.length); <span class="comment">// 得到3</span></span><br></pre></td></tr></tbody></table></figure>
<p>上面的代码也可以写成下面这样：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'abc'</span>.length <span class="comment">// 得到3</span></span><br></pre></td></tr></tbody></table></figure>
<p>点操作符也可以用来给属性赋值：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = {};  <span class="comment">// 空对象</span></span><br><span class="line">obj.foo = <span class="number">123</span>; <span class="comment">// 创建属性“foo”，设置它为123</span></span><br><span class="line"><span class="built_in">console</span>.log(obj.foo); <span class="comment">// 得到123</span></span><br></pre></td></tr></tbody></table></figure>
<p>你也可以通过它（.）调用方法：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'hello'</span>.toUpperCase(); <span class="comment">// 得到HELLO</span></span><br></pre></td></tr></tbody></table></figure>
<p>上面，我们在值<code>hello</code>上面调用方法<code>toUpperCase()</code>。</p>
<h3 id="4-1-原始类型值和对象"><a href="#4-1-原始类型值和对象" class="headerlink" title="4.1 原始类型值和对象"></a>4.1 原始类型值和对象</h3><p>JavaScript定义了不同值之间的区别：</p>
<ul>
<li>原始值包括：<code>boolean</code>，<code>number</code>，<code>string</code>，<code>null</code>和<code>undefined</code>。</li>
<li>所有其他的值都是对象。实际上对象被定义为——所有不为原始值的值。</li>
</ul>
<p>两者之间的主要区别在于他们是如何被比较的：每一个对象有一个独一无二的标志，并且仅和自己相等：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj1 = {};  <span class="comment">// 一个空对象</span></span><br><span class="line"><span class="keyword">var</span> obj2 = {};  <span class="comment">// 另一个空对象</span></span><br><span class="line">obj1 === obj2   <span class="comment">// false</span></span><br><span class="line">obj1 === obj1   <span class="comment">// true</span></span><br></pre></td></tr></tbody></table></figure>
<p>相反，所有原始值只要编码值相同就被认为是相同的：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> prim1 = <span class="number">123</span>;</span><br><span class="line"><span class="keyword">var</span> prim2 = <span class="number">123</span>;</span><br><span class="line">prim1 === prim2 <span class="comment">// true</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="4-2-原始类型值"><a href="#4-2-原始类型值" class="headerlink" title="4.2 原始类型值"></a>4.2 原始类型值</h3><p>下面全是原始类型值（简称：原始值）：</p>
<ul>
<li>布尔类型：true，false</li>
<li>数字类型：1736，1.351</li>
<li>字符串类型: ‘abc’，”abc”</li>
<li><p>两个“无值（non-values）”：undefined，null<br>原始值的特征：</p>
</li>
<li><p><strong>值做比较时,“内容”做比较</strong>。</p>
</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">3</span> === <span class="number">3</span> <span class="comment">// true</span></span><br><span class="line"><span class="string">'abc'</span> === <span class="string">'abc'</span> <span class="comment">// true</span></span><br></pre></td></tr></tbody></table></figure>
<ul>
<li><strong>无法更改</strong>：值的属性无法更改，无法添加和移除属性，获取未知属性总返回undefined。</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'abc'</span>;</span><br><span class="line">str.foo = <span class="number">3</span>; <span class="comment">// try to create property `foo` ⇒ no effect</span></span><br><span class="line">str.foo  <span class="comment">// unknown property ⇒  undefined</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="4-3-对象"><a href="#4-3-对象" class="headerlink" title="4.3 对象"></a>4.3 对象</h3><h4 id="4-3-1-对象的类型"><a href="#4-3-1-对象的类型" class="headerlink" title="4.3.1 对象的类型"></a>4.3.1 对象的类型</h4><p>所有非原始值的值都是对象。最常见的几种对象类型是：</p>
<ul>
<li>简单对象（类型是<code>Object</code>）能通过对象字面量创建：</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{</span><br><span class="line">    firstName: ‘Jane’,</span><br><span class="line">    lastName: ‘Doe’</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>上面的对象有两个属性：<code>firstName</code>属性的值是“Jane”，<code>lastName</code>属性的值是“Doe”。</p>
<ul>
<li>数组（类型是<code>Array</code>）能通过数组字面量创建：</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[ ‘apple’, ‘banana’, ‘cherry’ ]</span><br></pre></td></tr></tbody></table></figure>
<p>上面的数组有三个元素，可以通过数字索引访问。例如“apple”的索引是0。</p>
<ul>
<li>正则表达式对象（类型是<code>RegExp</code>）能通过正则表达式字面量创建。</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">/^a+b+$/</span><br></pre></td></tr></tbody></table></figure>
<h4 id="4-3-2-对象的特征"><a href="#4-3-2-对象的特征" class="headerlink" title="4.3.2 对象的特征"></a>4.3.2 对象的特征</h4><ul>
<li><strong>比较的是引用</strong>：比较的是标识符，每个值有自己的标识符。</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">{} === {}  <span class="comment">// 两个不同的空对象, false</span></span><br><span class="line"><span class="keyword">var</span> obj1 = {};</span><br><span class="line"><span class="keyword">var</span> obj2 = obj1;</span><br><span class="line">obj1 === obj2   <span class="comment">// true</span></span><br></pre></td></tr></tbody></table></figure>
<ul>
<li><strong>默认可以更改</strong>。</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = {};</span><br><span class="line">obj.foo = <span class="number">123</span>;</span><br><span class="line">obj.foo <span class="comment">//123</span></span><br></pre></td></tr></tbody></table></figure>
<p>所有的数据结构（如数组）都是对象，但并不是所有的对象都是数据结构。例如：正则表达式是对象，但不是数据结构。</p>
<h3 id="4-4-undefined-和-null"><a href="#4-4-undefined-和-null" class="headerlink" title="4.4 undefined 和 null"></a>4.4 undefined 和 null</h3><p><code>JavaScript</code>有两个“无值）”：<code>undefined</code>和<code>null</code>。</p>
<p><code>undefined</code>的意思是“没有值”。未初始化的变量是<code>undefined</code>：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> foo;</span><br><span class="line">foo <span class="comment">// undefined</span></span><br></pre></td></tr></tbody></table></figure>
<p>读取不存在的属性时，将返回<code>undefined</code>：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&gt; <span class="keyword">var</span> obj = {}; <span class="comment">// 空对象</span></span><br><span class="line">&gt; obj.foo <span class="comment">// undefined</span></span><br></pre></td></tr></tbody></table></figure>
<p>缺省的参数也是<code>undefined</code>：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x</span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> x;</span><br><span class="line">}</span><br><span class="line">f(); <span class="comment">//undefined</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>null</code>的意思是“没有对象”。它被用来表示对象的无值（参数，链上的对象等）。</p>
<p>通常情况下你应该把<code>undefined</code>和<code>null</code>看成是等价的，如果他们代表相同意义的无值的话。检查他们的一种方式是通过严格比较：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (x === <span class="literal">undefined</span> || x === <span class="literal">null</span>) {</span><br><span class="line">    ...</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>另一种在实际中使用的方法是认为undefined 和 null 都是false：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (!x) {</span><br><span class="line">    ...</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p><strong>警告</strong>：false，0，NaN 和 “” 都被当作false。</p>
</blockquote>
<h3 id="4-5-包装类型"><a href="#4-5-包装类型" class="headerlink" title="4.5 包装类型"></a>4.5 包装类型</h3><p>对象类型的实例<code>Foo</code>（包括内建类型，例如Array和其他自定义类型）从对象<code>Foo.prototype</code>上获取方法。你可以通过读取这个方法的方式（不是调用）验证这点：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">[].push === <span class="built_in">Array</span>.prototype.push  <span class="comment">// true</span></span><br></pre></td></tr></tbody></table></figure>
<p>相反，<strong>原始类型是没有类型的，所以每个原始类型有一个关联类型，称之为包装类型</strong>：</p>
<ul>
<li>布尔值的包装类型是 Boolean。布尔值从Boolean.prototype上获取方法：</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&gt; <span class="literal">true</span>.toString === <span class="built_in">Boolean</span>.prototype.toString    <span class="comment">//true</span></span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p>注意：包装类型名字的首字母是大写的B。如果在JavaScript中布尔值的类型可以访问，那么它可能会被转换为布尔对象。</p>
</blockquote>
<ul>
<li>数字值的包装类型是<code>Number</code>。</li>
<li>字符串值的包装类型是<code>String</code>。</li>
</ul>
<p>包装类型也有实例（他们的实例是对象），但不常用。相反，包装类型有其他用处：<strong>如果你将他们作为函数调用，他们可以将值转换为原始类型</strong>。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Number</span>(<span class="string">'123'</span>) <span class="comment">//123</span></span><br><span class="line"><span class="built_in">String</span>(<span class="literal">true</span>)  <span class="comment">//'true'</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="4-6-通过typeof和instanceof将值分类"><a href="#4-6-通过typeof和instanceof将值分类" class="headerlink" title="4.6 通过typeof和instanceof将值分类"></a>4.6 通过typeof和instanceof将值分类</h3><p>有两个操作符可以用来将值分类：<code>typeof</code>主要用于原始值，<code>instanceof</code>主要用于对象。</p>
<h4 id="4-6-1-typeof-使用方法如下"><a href="#4-6-1-typeof-使用方法如下" class="headerlink" title="4.6.1 typeof 使用方法如下"></a>4.6.1 typeof 使用方法如下</h4><p><code>typeof «value»</code></p>
<p><code>typeof</code>返回描述<code>value</code>“类型”的一个字符串。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">typeof</span> <span class="literal">true</span> <span class="comment">//'boolean'</span></span><br><span class="line"><span class="keyword">typeof</span> <span class="string">'abc'</span> <span class="comment">//'string'</span></span><br><span class="line"><span class="keyword">typeof</span> {} <span class="comment">// 空对象字面量,'object'</span></span><br><span class="line"><span class="keyword">typeof</span> [] <span class="comment">// 空数组字面量,'object'</span></span><br></pre></td></tr></tbody></table></figure>
<p>下面列出了<code>typeof</code>操作的所有结果：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">操作数 结果</span><br><span class="line"><span class="literal">undefined</span> <span class="string">'undefined'</span></span><br><span class="line"><span class="literal">null</span> <span class="string">'object'</span></span><br><span class="line"><span class="built_in">Boolean</span> value <span class="string">'boolean'</span></span><br><span class="line"><span class="built_in">Number</span> value <span class="string">'number'</span></span><br><span class="line"><span class="built_in">String</span> value <span class="string">'string'</span></span><br><span class="line"><span class="built_in">Function</span> <span class="string">'function'</span></span><br><span class="line">All other values <span class="string">'object'</span></span><br></pre></td></tr></tbody></table></figure>
<p>有两个结果和我们上面说的的原始值与对象是矛盾的：</p>
<ul>
<li>函数的类型是<code>function</code>而不是<code>object</code>。因为函数（类型为“function”）是对象（类型是对象）的子类型，这不是一个错误。</li>
<li><code>null</code>的类型是<code>object</code>。这是一个bug，但从没被修复，因为修复后会破坏现有的代码。</li>
</ul>
<h4 id="4-6-2-instanceof使用方法如下"><a href="#4-6-2-instanceof使用方法如下" class="headerlink" title="4.6.2 instanceof使用方法如下"></a>4.6.2 instanceof使用方法如下</h4><p><code>«value» instanceof «Constr»</code></p>
<p>如果<code>value</code>是一个对象，并且<code>value</code> 是由构造函数<code>Constr</code>创建的（参考：类）。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> b = <span class="keyword">new</span> Bar();  <span class="comment">// 通过构造函数Bar创建对象</span></span><br><span class="line">b <span class="keyword">instanceof</span> Bar    <span class="comment">//true</span></span><br><span class="line">{} <span class="keyword">instanceof</span> <span class="built_in">Object</span>    <span class="comment">//true</span></span><br><span class="line">[] <span class="keyword">instanceof</span> <span class="built_in">Array</span> <span class="comment">//true</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="4-7-深入阅读"><a href="#4-7-深入阅读" class="headerlink" title="4.7 深入阅读"></a>4.7 深入阅读</h3><ul>
<li><a href="https://yanhaijing.com/javascript/2014/01/05/exploring-the-abyss-of-null-and-undefined-in-javascript/">探索JavaScript中Null和Undefined的深渊</a></li>
</ul>
<h2 id="5、布尔"><a href="#5、布尔" class="headerlink" title="5、布尔"></a>5、布尔</h2><p>布尔类型原始值包括<code>true</code>和<code>false</code>。下面的操作符会得到布尔值：</p>
<ul>
<li>二元逻辑运算符：&amp;&amp;（与），||（或）</li>
<li>前缀逻辑运算符：!（非）</li>
<li>等值运算符：=== !== == !=</li>
<li>比较运算符（字符串或数字）：&gt; &gt;= &lt; &lt;=</li>
</ul>
<h3 id="5-1-真值和假值"><a href="#5-1-真值和假值" class="headerlink" title="5.1 真值和假值"></a>5.1 真值和假值</h3><p>每当<code>JavaScript</code>希望一个布尔值时（例如：if语句的条件），可以使用任何值。它将被理解（转换）为<code>true</code>或<code>false</code>。下面的值被理解为<code>false</code>：</p>
<ul>
<li>undefined, null</li>
<li>布尔: false</li>
<li>数字: 0, NaN</li>
<li>字符串: ‘’</li>
</ul>
<p>所有其他值被认为<code>true</code>。被理解为<code>false</code>的值称为假值，被理解为<code>true</code>的值称为真值。可以使用<code>Boolean</code>作为函数，测试值被理解为什么。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Boolean</span>(<span class="literal">undefined</span>)  <span class="comment">//false</span></span><br><span class="line"><span class="built_in">Boolean</span>(<span class="number">0</span>)    <span class="comment">//false</span></span><br><span class="line"><span class="built_in">Boolean</span>(<span class="number">3</span>)    <span class="comment">//true</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="5-2-二元逻辑运算符"><a href="#5-2-二元逻辑运算符" class="headerlink" title="5.2 二元逻辑运算符"></a>5.2 二元逻辑运算符</h3><p><code>JavaScript</code>中的<strong>二元逻辑运算符是短路运算</strong>——如果第一个操作数可以确定结果，第二个操作数将不被验证（运算）。例如，在下面的代码中，函数<code>foo()</code>永远不会被调用。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">false</span> &amp;&amp; foo()</span><br><span class="line"><span class="literal">true</span> || foo()</span><br></pre></td></tr></tbody></table></figure>
<p>此外，<strong>二元逻辑运算符会返回操作数中的一个</strong>，可能是一个布尔值，也可能不是。</p>
<ul>
<li><strong>与</strong>：如果第一个操作数是假值，返回第一个。否则返回第二个操作数。</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="literal">NaN</span> &amp;&amp; <span class="string">'abc'</span>    <span class="comment">//NaN</span></span><br><span class="line"><span class="number">123</span> &amp;&amp; <span class="string">'abc'</span>    <span class="comment">//'abc'</span></span><br></pre></td></tr></tbody></table></figure>
<ul>
<li><strong>或</strong>：如果第一个操作数是真值，返回第一个。否则，返回第二个操作数。</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'abc'</span> || <span class="number">123</span>    <span class="comment">//'abc'</span></span><br><span class="line"><span class="string">''</span> || <span class="number">123</span>   <span class="comment">//123</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="5-3-等值运算符"><a href="#5-3-等值运算符" class="headerlink" title="5.3 等值运算符"></a>5.3 等值运算符</h3><p>在<code>JavaScript</code>中检测相等，你可以使用严格相等（<code>===</code>）和严格不等（<code>!==</code>）。或者你也可以使用非严格相等（<code>==</code>）和非严格不等（<code>!=</code>）。</p>
<blockquote>
<p><strong>经验规则：总是用严格运算符，假装非严格运算符不存在。严格相等更安全。</strong></p>
</blockquote>
<h3 id="5-4-深入阅读"><a href="#5-4-深入阅读" class="headerlink" title="5.4 深入阅读"></a>5.4 深入阅读</h3><ul>
<li><a href="https://yanhaijing.com/javascript/2014/04/25/strict-equality-exemptions/">在JavaScript中什么时候使用==是正确的？</a></li>
</ul>
<h2 id="6、数字"><a href="#6、数字" class="headerlink" title="6、数字"></a>6、数字</h2><p><code>JavaScript</code>中的<strong>所有数字都是浮点型</strong>（虽然大部分的JavaScript引擎内部也使用整数）。至于为什么这样设计，查看这里（<a href="https://yanhaijing.com/javascript/2014/03/14/what-every-javascript-developer-should-know-about-floating-points">每一个JavaScript开发者应该了解的浮点知识</a>）。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span> === <span class="number">1.0</span>   <span class="comment">//true</span></span><br></pre></td></tr></tbody></table></figure>
<p>特殊数字：</p>
<ul>
<li><code>NaN</code> (“不是一个数字 not a number”): 错误值。</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Number</span>(<span class="string">'xyz'</span>)  <span class="comment">// 'xyz' 不能被转换为数字得到:NaN</span></span><br></pre></td></tr></tbody></table></figure>
<ul>
<li><code>Infinity</code>：也是最大错误值（无穷大）</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">3</span> / <span class="number">0</span>   <span class="comment">//Infinity</span></span><br><span class="line"><span class="built_in">Math</span>.pow(<span class="number">2</span>, <span class="number">1024</span>)  <span class="comment">// 数字太大了,得到Infinity</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>Infinity</code>有时很有用，因为它比任何其他数字都大。同样，<code>-Infinity</code> 比其他任何数字都小。</p>
<ul>
<li><code>JavaScript</code>有两个零，<code>+0</code>和<code>-0</code>。它（js引擎）通常不让你看到，并简单将两个零都显示为0：</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">+<span class="number">0</span>  <span class="comment">//0</span></span><br><span class="line"><span class="number">-0</span>  <span class="comment">//0</span></span><br></pre></td></tr></tbody></table></figure>
<p>因此最好假装只有一个零（正如我们看到假值时所做的那样：<strong>-0 和 +0 都是假值</strong>）。</p>
<h3 id="6-1-运算符"><a href="#6-1-运算符" class="headerlink" title="6.1 运算符"></a>6.1 运算符</h3><p><code>JavaScript</code>中有下列算数运算符：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">加: number1 + number2</span><br><span class="line">减: number1 - number2</span><br><span class="line">乘: number1 * number2</span><br><span class="line">除: number1 / number2</span><br><span class="line">模: number1 % number2</span><br><span class="line">自增: ++variable, variable++</span><br><span class="line">自减: –variable, variable–</span><br><span class="line">负值: -value</span><br><span class="line">正值（转换为数字）: +value</span><br></pre></td></tr></tbody></table></figure>
<p>全局对象<code>Math</code>通过函数提供更多算数运算操作。</p>
<p><code>JavaScript</code>中也有位运算符（例如：&amp;）。</p>
<h2 id="7、字符串"><a href="#7、字符串" class="headerlink" title="7、字符串"></a>7、字符串</h2><p>字符串可以直接通过字符串字面量创建。这些字面量被单引号或双引号包裹。反斜线（\）转义字符并且产生一些控制字符。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'abc'</span></span><br><span class="line"><span class="string">"abc"</span></span><br><span class="line"></span><br><span class="line"><span class="string">'Did she say "Hello"?'</span></span><br><span class="line"><span class="string">"Did she say \"Hello\"?"</span></span><br><span class="line"></span><br><span class="line"><span class="string">'That\'s nice!'</span></span><br><span class="line"><span class="string">"That's nice!"</span></span><br><span class="line"></span><br><span class="line"><span class="string">'Line 1\nLine 2'</span>  <span class="comment">// 换行</span></span><br><span class="line"><span class="string">'Backlash: \\'</span></span><br></pre></td></tr></tbody></table></figure>
<p>可以通过方括号访问单个字符：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">'abc'</span>;</span><br><span class="line">str[<span class="number">1</span>]    <span class="comment">//'b'</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>length</code>属性是字符串的字符数量。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'abc'</span>.length  <span class="comment">//3</span></span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p><strong>提醒</strong>：字符串是不可变的，如果你想改变现有字符串，你需要创建一个新的字符串。</p>
</blockquote>
<h3 id="7-1-字符串运算符"><a href="#7-1-字符串运算符" class="headerlink" title="7.1 字符串运算符"></a>7.1 字符串运算符</h3><p>字符串可以通过加号操作符（+）拼接，如果其中一个操作数为字符串，会将另一个操作数也转换为字符串。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> msgCount = <span class="number">3</span>;</span><br><span class="line"><span class="string">'You have '</span>+ msgCount + <span class="string">' messages'</span> <span class="comment">//'You have 3 messages'</span></span><br></pre></td></tr></tbody></table></figure>
<p>连续执行拼接操作可以使用<code>+=</code>操作符：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> str = <span class="string">''</span>;</span><br><span class="line">str += <span class="string">'Multiple '</span>;</span><br><span class="line">str += <span class="string">'pieces '</span>;</span><br><span class="line">str += <span class="string">'are concatenated.'</span>;</span><br><span class="line"><span class="built_in">console</span>.log(str); <span class="comment">//'Multiple pieces are concatenated.'</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="7-2-字符串方法"><a href="#7-2-字符串方法" class="headerlink" title="7.2 字符串方法"></a>7.2 字符串方法</h3><p>字符串有许多有用的方法。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'abc'</span>.slice(<span class="number">1</span>)  <span class="comment">// 复制子字符串,得到索引1及其之后的字符串，即：'bc'</span></span><br><span class="line"><span class="string">'abc'</span>.slice(<span class="number">1</span>, <span class="number">2</span>)   <span class="comment">//得到索引1和2之间的字符串，即：'b'</span></span><br><span class="line"></span><br><span class="line"><span class="string">'\t xyz  '</span>.trim()  <span class="comment">// 移除空白字符，即：'xyz'</span></span><br><span class="line"></span><br><span class="line"><span class="string">'mjölnir'</span>.toUpperCase()   <span class="comment">//转成大写，即：'MJÖLNIR'</span></span><br><span class="line"></span><br><span class="line"><span class="string">'abc'</span>.indexOf(<span class="string">'b'</span>)  <span class="comment">// 查找第一个b的索引，即：1</span></span><br><span class="line"><span class="string">'abc'</span>.indexOf(<span class="string">'x'</span>)    <span class="comment">//没有返回-1</span></span><br></pre></td></tr></tbody></table></figure>
<h2 id="8、语句"><a href="#8、语句" class="headerlink" title="8、语句"></a>8、语句</h2><h3 id="8-1-条件（Conditionals）"><a href="#8-1-条件（Conditionals）" class="headerlink" title="8.1 条件（Conditionals）"></a>8.1 条件（Conditionals）</h3><p><code>if</code>语句通过布尔条件决定执行那个分支：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">if</span> (myvar === <span class="number">0</span>) {</span><br><span class="line">    <span class="comment">// then</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (myvar === <span class="number">0</span>) {</span><br><span class="line">    <span class="comment">// then</span></span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line">    <span class="comment">// else</span></span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">if</span> (myvar === <span class="number">0</span>) {</span><br><span class="line">    <span class="comment">// then</span></span><br><span class="line">} <span class="keyword">else</span> <span class="keyword">if</span> (myvar === <span class="number">1</span>) {</span><br><span class="line">    <span class="comment">// else-if</span></span><br><span class="line">} <span class="keyword">else</span> <span class="keyword">if</span> (myvar === <span class="number">2</span>) {</span><br><span class="line">    <span class="comment">// else-if</span></span><br><span class="line">} <span class="keyword">else</span> {</span><br><span class="line">    <span class="comment">// else</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>下面的<code>switch</code>语句，furit的值决定那个分支被执行。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">switch</span> (fruit) {</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'banana'</span>:</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">case</span> <span class="string">'apple'</span>:</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">        <span class="keyword">break</span>;</span><br><span class="line">    <span class="keyword">default</span>:  <span class="comment">// 所有其他情况</span></span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<h3 id="8-2-循环（Loops）"><a href="#8-2-循环（Loops）" class="headerlink" title="8.2 循环（Loops）"></a>8.2 循环（Loops）</h3><p>for 循环的格式如下：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span>(初始化; 当条件成立时循环; 下一步操作)</span><br></pre></td></tr></tbody></table></figure>
<p>例子：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i &lt; arr.length; i++) {</span><br><span class="line">    <span class="built_in">console</span>.log(arr[i]);</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>当条件成立时<code>while</code>循环继续循环它的循环体。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 和上面的for循环相等</span></span><br><span class="line"><span class="keyword">var</span> i = <span class="number">0</span>;</span><br><span class="line"><span class="keyword">while</span> (i &lt; arr.length) {</span><br><span class="line">    <span class="built_in">console</span>.log(arr[i]);</span><br><span class="line">    i++;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>当条件成立时，<code>do-while</code>循环继续循环。由于条件位于循环体之后，所以循环体总是被至少至少执行一次。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">do</span> {</span><br><span class="line">    <span class="comment">// ...</span></span><br><span class="line">} <span class="keyword">while</span>(条件);</span><br></pre></td></tr></tbody></table></figure>
<p>在所有的循环中：</p>
<ul>
<li>break中断循环</li>
<li>continue开始一个新的循环迭代</li>
</ul>
<h2 id="9、函数"><a href="#9、函数" class="headerlink" title="9、函数"></a>9、函数</h2><p>定义函数的一种方法是通过函数声明：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">add</span>(<span class="params">param1, param2</span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> param1 + param2;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>上面的代码定义一个名称叫做<code>add</code>的函数，有两个参数<code>param1</code>和<code>param2</code>，并且返回参数的和。下面是如何调用这个函数：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">add(<span class="number">6</span>, <span class="number">1</span>)   <span class="comment">//7</span></span><br><span class="line">add(<span class="string">'a'</span>, <span class="string">'b'</span>)   <span class="comment">//'ab'</span></span><br></pre></td></tr></tbody></table></figure>
<p>另一种定义<code>add()</code>函数的方法是通过函数表达式：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> add = <span class="function"><span class="keyword">function</span> (<span class="params">param1, param2</span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> param1 + param2;</span><br><span class="line">};</span><br></pre></td></tr></tbody></table></figure>
<p>函数表达式产生一个值，因此可以直接将函数作为参数传递给其他函数：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">someOtherFunction(<span class="function"><span class="keyword">function</span> (<span class="params">p1, p2</span>) </span>{ ... });</span><br></pre></td></tr></tbody></table></figure>
<h3 id="函数声明提升"><a href="#函数声明提升" class="headerlink" title="函数声明提升"></a>函数声明提升</h3><p>函数声明会被提升，他们全被移动到当前作用域开始之处。这允许你在函数声明之前调用它们：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>{</span><br><span class="line">    bar();  <span class="comment">// 没问题，bar被提升</span></span><br><span class="line">    <span class="function"><span class="keyword">function</span> <span class="title">bar</span>(<span class="params"></span>) </span>{</span><br><span class="line">        ...</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<blockquote>
<p><strong>注意</strong>：虽然变量声明也会被提升，但赋值的过程不会被提升：</p>
</blockquote>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>{</span><br><span class="line">    bar();  <span class="comment">// 有问题，bar是undefined</span></span><br><span class="line">    <span class="keyword">var</span> bar = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">        <span class="comment">// ...</span></span><br><span class="line">    };</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<h3 id="9-1-特殊变量参数"><a href="#9-1-特殊变量参数" class="headerlink" title="9.1 特殊变量参数"></a>9.1 特殊变量参数</h3><p><strong>在<code>JavaScript</code>中你可以调用任意函数并传递任意数量的参数</strong>——语言绝不会“抱怨”（参数检测）。都可以正常工作，然而，使所有参数可访问需要通过特殊变量<code>arguments</code>。<code>arguments</code>看起来像数组，但它没有数组的方法（称为类数组 array-like）。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>) </span>{ <span class="keyword">return</span> <span class="built_in">arguments</span> }</span><br><span class="line"><span class="keyword">var</span> args = f(<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>);</span><br><span class="line">args.length <span class="comment">//3</span></span><br><span class="line">args[<span class="number">0</span>]  <span class="comment">// 获取索引为0的元素,'a'</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="9-2-太多或太少参数"><a href="#9-2-太多或太少参数" class="headerlink" title="9.2 太多或太少参数"></a>9.2 太多或太少参数</h3><p>让我们通过下面的函数探索<code>JavaScript</code>中传递太多或太少参数时如何处理</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params">x, y</span>) </span>{</span><br><span class="line">    <span class="built_in">console</span>.log(x, y);</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>多出的参数将被忽略（可以通过<code>arguments</code>访问）：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">f(<span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span>)    <span class="comment">//a b</span></span><br></pre></td></tr></tbody></table></figure>
<p>缺少的参数将会是<code>undefined</code>：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">f(<span class="string">'a'</span>)    <span class="comment">//a undefined</span></span><br><span class="line">f() <span class="comment">//undefined undefined</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="9-3-可选参数"><a href="#9-3-可选参数" class="headerlink" title="9.3 可选参数"></a>9.3 可选参数</h3><p>下面是一个常见模式，给参数设置默认值：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">pair</span>(<span class="params">x, y</span>) </span>{</span><br><span class="line">    x = x || <span class="number">0</span>;  <span class="comment">// (*)</span></span><br><span class="line">    y = y || <span class="number">0</span>;</span><br><span class="line">    <span class="keyword">return</span> [ x, y ];</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>在<code>（*）</code>这行，如果x是真值（除了：<code>null</code>，<code>undefined</code> 等）， 操作符返回x。否则，它返回第二个操作数。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">pair()  <span class="comment">//[ 0, 0 ]</span></span><br><span class="line">pair(<span class="number">3</span>) <span class="comment">//[ 3, 0 ]</span></span><br><span class="line">pair(<span class="number">3</span>, <span class="number">5</span>)  <span class="comment">//[ 3, 5 ]</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="9-4-强制数量"><a href="#9-4-强制数量" class="headerlink" title="9.4 强制数量"></a>9.4 强制数量</h3><p>如果你想强制参数的数量，你可以检测<code>arguments.length</code>：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">pair</span>(<span class="params">x, y</span>) </span>{</span><br><span class="line">    <span class="keyword">if</span> (<span class="built_in">arguments</span>.length !== <span class="number">2</span>) {</span><br><span class="line">        <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'Need exactly 2 arguments'</span>);</span><br><span class="line">    }</span><br><span class="line">    ...</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<h3 id="9-5-将arguments-转换为数组"><a href="#9-5-将arguments-转换为数组" class="headerlink" title="9.5 将arguments 转换为数组"></a>9.5 将arguments 转换为数组</h3><p><code>arguments</code>不是一个数组，它仅仅是类数组（array-like）：它有一个<code>length</code>属性，并且你可以通过方括号索引方式访问它的元素。然而，你不能移除元素，或在它上面调用任何数组方法。因此，有时你需要将其转换为数组。这就是下面函数的作用。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">toArray</span>(<span class="params">arrayLikeObject</span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> [].slice.call(arrayLikeObject);</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<h2 id="10、异常处理"><a href="#10、异常处理" class="headerlink" title="10、异常处理"></a>10、异常处理</h2><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">异常处理</a>最常见的方式像下面这样：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">throwException</span>(<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">throw</span> <span class="keyword">new</span> <span class="built_in">Error</span>(<span class="string">'Problem!'</span>);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="keyword">try</span> {</span><br><span class="line">    throwException();</span><br><span class="line">} <span class="keyword">catch</span> (e) {</span><br><span class="line">    <span class="built_in">console</span>.log(e);  <span class="comment">// 错误：信息</span></span><br><span class="line">    <span class="built_in">console</span>.log(e.stack);  <span class="comment">// 非标准，但大部分浏览器支持</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>try分支包裹易出错的代码，如果try分支内部抛出异常，catch分支将会执行。</p>
<h2 id="11、严格模式"><a href="#11、严格模式" class="headerlink" title="11、严格模式"></a>11、严格模式</h2><p>严格模式开启检测和一些其他措施，使<code>JavaScript</code>变成更整洁的语言。推荐使用严格模式。为了开启严格模式，只需在<code>JavaScript</code>文件或<code>script</code>标签第一行添加如下语句：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">'use strict'</span>;</span><br></pre></td></tr></tbody></table></figure>
<p>你也可以在每个函数上选择性开启严格模式，只需将上面的代码放在函数的开头：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">functionInStrictMode</span>(<span class="params"></span>) </span>{</span><br><span class="line"><span class="meta">    'use strict'</span>;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>下面的两小节看下严格模式的三大好处。</p>
<h3 id="11-1-明确错误"><a href="#11-1-明确错误" class="headerlink" title="11.1 明确错误"></a>11.1 明确错误</h3><p>让我们看一个例子，严格模式给我们明确的错误，否则<code>JavaScript</code>总是静默失败：下面的函数<code>f()</code> 执行一些非法操作，它试图更改所有字符串都有的只读属性——<code>length</code>：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>) </span>{</span><br><span class="line">    <span class="string">'abc'</span>.length = <span class="number">5</span>;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>当你调用上面的函数，它静默失败，赋值操作被简单忽略。让我们将<code>f()</code>在严格模式下运行：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f_strict</span>(<span class="params"></span>) </span>{</span><br><span class="line"><span class="meta">    'use strict'</span>;</span><br><span class="line">    <span class="string">'abc'</span>.length = <span class="number">5</span>;</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>现在浏览器报给我们一些错误：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">f_strict()  <span class="comment">// TypeError: Cannot assign to read only property 'length' of abc</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="不是方法的函数中的this"><a href="#不是方法的函数中的this" class="headerlink" title="不是方法的函数中的this"></a>不是方法的函数中的this</h3><p>在严格模式下，不作为方法的函数中的<code>this</code>值是<code>undefined</code>：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f_strict</span>(<span class="params"></span>) </span>{</span><br><span class="line"><span class="meta">    'use strict'</span>;</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(f_strict() === <span class="literal">undefined</span>);  <span class="comment">// true</span></span><br></pre></td></tr></tbody></table></figure>
<p>在非严格模式下，<code>this</code>的值是被称作全局对象（<code>global object</code>）（在浏览器里是<code>window</code>）：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>;</span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(f() === <span class="built_in">window</span>);  <span class="comment">// true</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="11-2-不再自动创建全局变量"><a href="#11-2-不再自动创建全局变量" class="headerlink" title="11.2 不再自动创建全局变量"></a>11.2 不再自动创建全局变量</h3><p>在非严格模式下，如果你给不存在的变量赋值，<code>JavaScript</code>会自动创建一个全局变量：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f</span>(<span class="params"></span>) </span>{ foo = <span class="number">5</span> }</span><br><span class="line">f()  <span class="comment">// 不会报错</span></span><br><span class="line">foo <span class="comment">// 5</span></span><br></pre></td></tr></tbody></table></figure>
<p>在严格模式下，这会产生一个错误：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">f_strict</span>(<span class="params"></span>) </span>{ <span class="string">'use strict'</span>; foo2 = <span class="number">4</span>; }</span><br><span class="line">f_strict()  <span class="comment">// ReferenceError: foo2 is not defined</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="11-3-深入阅读"><a href="#11-3-深入阅读" class="headerlink" title="11.3 深入阅读"></a>11.3 深入阅读</h3><ul>
<li><a href="https://yanhaijing.com/javascript/2013/12/28/demystifying-this-in-javascript">揭秘javascript中谜一样的this</a></li>
<li><a href="https://yanhaijing.com/javascript/2014/04/30/javascript-this-keyword">JavaScript中的this关键字</a></li>
</ul>
<h2 id="12、变量作用域和闭包"><a href="#12、变量作用域和闭包" class="headerlink" title="12、变量作用域和闭包"></a>12、变量作用域和闭包</h2><p>在<code>JavaScript</code>中，你必须使用变量之前，通过<code>var</code>声明变量：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x;</span><br><span class="line">x = <span class="number">3</span>;</span><br><span class="line">y = <span class="number">4</span>;  <span class="comment">// ReferenceError: y is not defined</span></span><br></pre></td></tr></tbody></table></figure>
<p>你可以用一条<code>var</code>语句声明和初始化多个变量：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="number">1</span>, y = <span class="number">2</span>, z = <span class="number">3</span>;</span><br></pre></td></tr></tbody></table></figure>
<p>但我建议每个变量使用一条语句。因此，我将上面的语句重写为：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">var</span> y = <span class="number">2</span>;</span><br><span class="line"><span class="keyword">var</span> z = <span class="number">3</span>;</span><br></pre></td></tr></tbody></table></figure>
<p>由于提升（见下文），最好在函数顶部声明变量。</p>
<h3 id="12-1-变量和函数作用域"><a href="#12-1-变量和函数作用域" class="headerlink" title="12.1 变量和函数作用域"></a>12.1 变量和函数作用域</h3><p>变量的作用域总是整个函数（没有块级作用域）。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">var</span> x = <span class="number">-3</span>;</span><br><span class="line">    <span class="keyword">if</span> (x &lt; <span class="number">0</span>) {  <span class="comment">// (*)</span></span><br><span class="line">        <span class="keyword">var</span> tmp = -x;</span><br><span class="line">        ...</span><br><span class="line">    }</span><br><span class="line">    <span class="built_in">console</span>.log(tmp);  <span class="comment">// 3</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>我们可以看到tmp变量不仅在（*）所在行的语句块存在，它在整个函数内都存在。</p>
<h3 id="12-2-变量提升"><a href="#12-2-变量提升" class="headerlink" title="12.2 变量提升"></a>12.2 变量提升</h3><p>变量声明会被提升：声明会被移到函数的顶部，但赋值过程不会。举个例子，在下面的函数中<code>（*）</code>行位置声明了一个变量。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>{</span><br><span class="line">    <span class="built_in">console</span>.log(tmp); <span class="comment">// undefined</span></span><br><span class="line">    <span class="keyword">if</span> (<span class="literal">false</span>) {</span><br><span class="line">        <span class="keyword">var</span> tmp = <span class="number">3</span>;  <span class="comment">// (*)</span></span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>在内部，上面的函数被执行像下面这样：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">foo</span>(<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">var</span> tmp;  <span class="comment">// declaration is hoisted</span></span><br><span class="line">    <span class="built_in">console</span>.log(tmp);</span><br><span class="line">    <span class="keyword">if</span> (<span class="literal">false</span>) {</span><br><span class="line">        tmp = <span class="number">3</span>;  <span class="comment">// assignment stays put</span></span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<h3 id="12-3-闭包"><a href="#12-3-闭包" class="headerlink" title="12.3 闭包"></a>12.3 闭包</h3><p>每个函数保持和函数体内部变量的连接，甚至离开创建它的作用域之后。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">createIncrementor</span>(<span class="params">start</span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{  <span class="comment">// (*)</span></span><br><span class="line">        <span class="keyword">return</span> start++;</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>在<code>（*）</code>行开始的函数在它创建时保留上下文，并在内部保存一个<code>start</code>活动值：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> inc = createIncrementor(<span class="number">5</span>);</span><br><span class="line">inc()   <span class="comment">// 5</span></span><br><span class="line">inc() <span class="comment">// 6</span></span><br><span class="line">inc()   <span class="comment">// 7</span></span><br></pre></td></tr></tbody></table></figure>
<p>闭包是一个函数加上和其作用域链的链接。因此，<code>createIncrementor()</code>返回的是一个闭包。</p>
<h3 id="12-4-IIFE：模拟块级作用域"><a href="#12-4-IIFE：模拟块级作用域" class="headerlink" title="12.4 IIFE：模拟块级作用域"></a>12.4 IIFE：模拟块级作用域</h3><p>有时你想模拟一个块，例如你想将变量从全局作用域隔离。完成这个工作的模式叫做 <code>IIFE</code>(立即执行函数表达式(<code>Immediately Invoked Function Expression</code>))：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{  <span class="comment">// 块开始</span></span><br><span class="line">    <span class="keyword">var</span> tmp = ...;  <span class="comment">// 非全局变量</span></span><br><span class="line">}());  <span class="comment">// 块结束</span></span><br></pre></td></tr></tbody></table></figure>
<p>上面你会看到函数表达式被立即执行。外面的括号用来阻止它被解析成函数声明；只有函数表达式能被立即调用。函数体产生一个新的作用域并使<code>tmp</code>变为局部变量。</p>
<h3 id="12-5-闭包实现变量共享"><a href="#12-5-闭包实现变量共享" class="headerlink" title="12.5 闭包实现变量共享"></a>12.5 闭包实现变量共享</h3><p>下面是个经典问题，如果你不知道，会让你费尽思量。因此，先浏览下，对问题有个大概的了解。</p>
<p>闭包保持和外部变量的连接，有时可能和你想像的行为不一致：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> result = [];</span><br><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i &lt; <span class="number">5</span>; i++) {</span><br><span class="line">    result.push(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ <span class="keyword">return</span> i });  <span class="comment">// (*)</span></span><br><span class="line">}</span><br><span class="line"><span class="built_in">console</span>.log(result[<span class="number">1</span>]()); <span class="comment">// 5 (不是 1)</span></span><br><span class="line"><span class="built_in">console</span>.log(result[<span class="number">3</span>]()); <span class="comment">// 5 (不是 3)</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>(*)</code>行的返回值总是当前的i值，而不是当函数被创建时的i值。当循环结束后，i的值是5，这是为什么数组中的所有函数的返回值总是一样的。如果你想捕获当前变量的快照，你可以使用<code>IIFE</code>：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">for</span> (<span class="keyword">var</span> i=<span class="number">0</span>; i &lt; <span class="number">5</span>; i++) {</span><br><span class="line">    (<span class="function"><span class="keyword">function</span> (<span class="params">i2</span>) </span>{</span><br><span class="line">        result.push(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{ <span class="keyword">return</span> i2 });</span><br><span class="line">    }(i));  <span class="comment">// 复制当前的i</span></span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>深入阅读</p>
<ul>
<li><a href="https://yanhaijing.com/javascript/2013/08/30/understanding-scope-and-context-in-javascript">认识javascript中的作用域和上下文</a></li>
<li><a href="https://yanhaijing.com/javascript/2014/04/30/JavaScript-Scoping-and-Hoisting">JavaScript的作用域和提升机制</a></li>
<li><a href="https://yanhaijing.com/javascript/2014/04/29/what-is-the-execution-context-in-javascript">了解JavaScript的执行上下文</a></li>
</ul>
<h2 id="13、对象和继承"><a href="#13、对象和继承" class="headerlink" title="13、对象和继承"></a>13、对象和继承</h2><p>和所有的值类型一样，对象有属性。事实上，你可以将对象当作一组属性的集合，每个属性都是一对（键和值）。键是字符串，值可以是任意<code>JavaScript</code>值。到目前为止，我们仅仅见过键是标识符的属性，因为点操作符处理的键必须为标识符。在这节，你讲见到另一种访问属性的方法，能将任意字符串作为键。</p>
<h3 id="13-1-单个对象"><a href="#13-1-单个对象" class="headerlink" title="13.1 单个对象"></a>13.1 单个对象</h3><p>在<code>JavaScript</code>中，你可以直接创建对象，通过对象字面量：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> jane = {</span><br><span class="line">    name: <span class="string">'Jane'</span>,</span><br><span class="line"></span><br><span class="line">    describe: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"><span class="meta">        'use strict'</span>;</span><br><span class="line">        <span class="keyword">return</span> <span class="string">'Person named '</span>+<span class="keyword">this</span>.name;</span><br><span class="line">    }</span><br><span class="line">};</span><br></pre></td></tr></tbody></table></figure>
<p>上面的对象有两个属性：<code>name</code>和<code>describe</code>。你能读（“get”）和 写（“set”）属性：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">jane.name  <span class="comment">// get，'Jane'</span></span><br><span class="line">jane.name = <span class="string">'John'</span>;  <span class="comment">// set</span></span><br><span class="line">jane.newProperty = <span class="string">'abc'</span>;  <span class="comment">// 自动创建</span></span><br></pre></td></tr></tbody></table></figure>
<p>属性是函数如<code>describe</code>可以被当作方法调用。当调用他们时可以在它们内部通过this引用对象。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">jane.describe()  <span class="comment">// 调用方法,'Person named John'</span></span><br><span class="line">jane.name = <span class="string">'Jane'</span>;</span><br><span class="line">jane.describe() <span class="comment">// 'Person named Jane'</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>in</code>操作符用来检测一个属性是否存在：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'newProperty'</span> <span class="keyword">in</span> jane   <span class="comment">// true</span></span><br><span class="line"><span class="string">'foo'</span> <span class="keyword">in</span> jane   <span class="comment">// false</span></span><br></pre></td></tr></tbody></table></figure>
<p>若读取一个不存在的属性，将会得到<code>undefined</code>值。因此上面的两个检查也可以像下面这样：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">jane.newProperty !== <span class="literal">undefined</span>  <span class="comment">// true</span></span><br><span class="line">jane.foo !== <span class="literal">undefined</span>  <span class="comment">// false</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>delete</code>操作符用来删除一个属性：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">delete</span> jane.newProperty <span class="comment">//true</span></span><br><span class="line"><span class="string">'newProperty'</span> <span class="keyword">in</span> jane   <span class="comment">//false</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="13-2-任意键属性"><a href="#13-2-任意键属性" class="headerlink" title="13.2 任意键属性"></a>13.2 任意键属性</h3><p>属性的键可以是任意字符串。到目前为止，我们看到的对象字面量中的和点操作符后的属性关键字。按这种方法你只能使用标识符。如果你想用其他任意字符串作为键名，你必须在对象字面量里加上引号，并使用方括号获取和设置属性。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> obj = { <span class="string">'not an identifier'</span>: <span class="number">123</span> };</span><br><span class="line">obj[<span class="string">'not an identifier'</span>]    <span class="comment">//123</span></span><br><span class="line">obj[<span class="string">'not an identifier'</span>] = <span class="number">456</span>;</span><br></pre></td></tr></tbody></table></figure>
<p>方括号允许你动态计算属性关键字：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> x = <span class="string">'name'</span>;</span><br><span class="line">jane[x]; <span class="comment">// 'Jane'</span></span><br><span class="line">jane[<span class="string">'na'</span>+<span class="string">'me'</span>]; <span class="comment">// 'Jane'</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="13-3-引用方法"><a href="#13-3-引用方法" class="headerlink" title="13.3 引用方法"></a>13.3 引用方法</h3><p>如果你引用一个方法，它将失去和对象的连接。就其本身而言，函数不是方法，其中的<code>this</code>值为<code>undefined</code>（严格模式下）。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> func = jane.describe;</span><br><span class="line">func()  <span class="comment">// TypeError: Cannot read property 'name' of undefined</span></span><br></pre></td></tr></tbody></table></figure>
<p>解决办法是使用函数内置的<code>bind()</code>方法。它创建一个新函数，其<code>this</code>值固定为给定的值。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> func2 = jane.describe.bind(jane);</span><br><span class="line">func2() <span class="comment">// 'Person named Jane'</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="13-4-方法内部的函数"><a href="#13-4-方法内部的函数" class="headerlink" title="13.4 方法内部的函数"></a>13.4 方法内部的函数</h3><p>每个函数都有一个特殊变量<code>this</code>。如果你在方法内部嵌入函数是很不方便的，因为你不能从函数中访问方法的<code>this</code>。下面是一个例子，我们调用<code>forEach</code>循环一个数组：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> jane = {</span><br><span class="line">    name: <span class="string">'Jane'</span>,</span><br><span class="line">    friends: [ <span class="string">'Tarzan'</span>, <span class="string">'Cheeta'</span> ],</span><br><span class="line">    logHiToFriends: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"><span class="meta">        'use strict'</span>;</span><br><span class="line">        <span class="keyword">this</span>.friends.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">friend</span>) </span>{</span><br><span class="line">            <span class="comment">// 这里的“this”是undefined</span></span><br><span class="line">            <span class="built_in">console</span>.log(<span class="keyword">this</span>.name + <span class="string">' says hi to '</span> + friend);</span><br><span class="line">        });</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>调用<code>logHiToFriends</code>会产生错误：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">jane.logHiToFriends()   <span class="comment">// TypeError: Cannot read property 'name' of undefined</span></span><br></pre></td></tr></tbody></table></figure>
<p>有两种方法修复这问题。</p>
<ul>
<li>将<code>this</code>存储在不同的变量。</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">logHiToFriends: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"><span class="meta">    'use strict'</span>;</span><br><span class="line">    <span class="keyword">var</span> that = <span class="keyword">this</span>;</span><br><span class="line">    <span class="keyword">this</span>.friends.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">friend</span>) </span>{</span><br><span class="line">        <span class="built_in">console</span>.log(that.name + <span class="string">' says hi to '</span> + friend);</span><br><span class="line">    });</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<ul>
<li>forEach的第二个参数允许提供<code>this</code>值。</li>
</ul>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">logHiToFriends: <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line"><span class="meta">    'use strict'</span>;</span><br><span class="line">    <span class="keyword">this</span>.friends.forEach(<span class="function"><span class="keyword">function</span> (<span class="params">friend</span>) </span>{</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.name + <span class="string">' says hi to '</span> + friend);</span><br><span class="line">    }, <span class="keyword">this</span>);</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure>
<p>在<code>JavaScript</code>中函数表达式经常被用作函数参数。时刻小心函数表达式中的<code>this</code>。</p>
<h3 id="13-5-构造函数：对象工厂"><a href="#13-5-构造函数：对象工厂" class="headerlink" title="13.5 构造函数：对象工厂"></a>13.5 构造函数：对象工厂</h3><p>除了作为“真正”的函数和方法，函数还在JavaScript中扮演第三种角色：<strong>如果通过new操作符调用，他们会变为构造函数，对象的工厂</strong>。构造函数是对其他语言中的类的粗略模拟。约定俗成，构造函数的第一个字母大写。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 设置实例数据</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Point</span>(<span class="params">x, y</span>) </span>{</span><br><span class="line">    <span class="keyword">this</span>.x = x;</span><br><span class="line">    <span class="keyword">this</span>.y = y;</span><br><span class="line">}</span><br><span class="line"><span class="comment">// 方法</span></span><br><span class="line">Point.prototype.dist = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> <span class="built_in">Math</span>.sqrt(<span class="keyword">this</span>.x*<span class="keyword">this</span>.x + <span class="keyword">this</span>.y*<span class="keyword">this</span>.y);</span><br><span class="line">};</span><br></pre></td></tr></tbody></table></figure>
<p>我们看到构造函数分为两部分：首先，<code>Point</code>函数设置实例数据。其次，<code>Point.prototype</code>属性包含对象的方法。前者的数据是每个实例私有的，后面的数据是所有实例共享的。</p>
<p>我们通过new操作符调用<code>Point</code>：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> p = <span class="keyword">new</span> Point(<span class="number">3</span>, <span class="number">5</span>);</span><br><span class="line">p.x <span class="comment">//3</span></span><br><span class="line">p.dist();    <span class="comment">//5.830951894845301</span></span><br></pre></td></tr></tbody></table></figure>
<p>p是<code>Point</code>的一个实例：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">p <span class="keyword">instanceof</span> Point  <span class="comment">//true</span></span><br><span class="line"><span class="keyword">typeof</span> p    <span class="comment">//'object'</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="13-6-深入阅读"><a href="#13-6-深入阅读" class="headerlink" title="13.6 深入阅读"></a>13.6 深入阅读</h3><ul>
<li><a href="https://yanhaijing.com/javascript/2013/08/23/javascript-inheritance-how-to-shoot-yourself-in-the-foot-with-prototypes">Javascript继承 原型的陷阱</a></li>
<li><a href="https://yanhaijing.com/javascript/2013/08/30/encapsulation-of-javascript">Javascript 封装问题</a></li>
</ul>
<h2 id="14、数组"><a href="#14、数组" class="headerlink" title="14、数组"></a>14、数组</h2><p>数组是数组元素的序列，能通过整数索引方法数组元素，数组索引从0开始。</p>
<h3 id="14-1-数组字面量"><a href="#14-1-数组字面量" class="headerlink" title="14.1 数组字面量"></a>14.1 数组字面量</h3><p>数组字面量创建数组很方便：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&gt; <span class="keyword">var</span> arr = [ <span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span> ];</span><br></pre></td></tr></tbody></table></figure>
<p>上面的数组有三个元素：分别是字符串“a”，“b”， “c”。你可以通过整数索引访问它们：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">arr[<span class="number">0</span>]  <span class="comment">//'a'</span></span><br><span class="line">arr[<span class="number">0</span>] = <span class="string">'x'</span>;</span><br><span class="line">arr</span><br><span class="line"><span class="comment">// [ 'x', 'b', 'c' ]</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>length</code>属性总表示一个数组有多少项元素。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">arr.length    <span class="comment">//3</span></span><br></pre></td></tr></tbody></table></figure>
<p>除此之外它也可以用来从数组上移除尾部元素：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">arr.length = <span class="number">2</span>;</span><br><span class="line">arr <span class="comment">// [ 'x', 'b' ]</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>in</code>操作符也可以在数组上工作。</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">1</span> <span class="keyword">in</span> arr <span class="comment">// arr在索引为1处是否有元素？,true</span></span><br><span class="line"><span class="number">5</span> <span class="keyword">in</span> arr <span class="comment">// arr在索引为5处是否有元素？false</span></span><br></pre></td></tr></tbody></table></figure>
<p>值得注意的是数组是对象，因此可以有对象属性：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">arr.foo = <span class="number">123</span>;</span><br><span class="line">arr.foo   <span class="comment">// 123</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="14-2-数组方法"><a href="#14-2-数组方法" class="headerlink" title="14.2 数组方法"></a>14.2 数组方法</h3><p>数组有许多方法。举些例子：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> arr = [ <span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span> ];</span><br><span class="line"></span><br><span class="line">arr.slice(<span class="number">1</span>, <span class="number">2</span>)  <span class="comment">// 复制元素，[ 'b' ]</span></span><br><span class="line">arr.slice(<span class="number">1</span>)    <span class="comment">// [ 'b', 'c' ]</span></span><br><span class="line"></span><br><span class="line">arr.push(<span class="string">'x'</span>)  <span class="comment">// 在末尾添加一个元素，4</span></span><br><span class="line">arr <span class="comment">// [ 'a', 'b', 'c', 'x' ]</span></span><br><span class="line"></span><br><span class="line">arr.pop()  <span class="comment">// 移除最后一个元素，'x'</span></span><br><span class="line">arr   <span class="comment">// [ 'a', 'b', 'c' ]</span></span><br><span class="line"></span><br><span class="line">arr.shift()  <span class="comment">// 移除第一个元素，'a'</span></span><br><span class="line">arr <span class="comment">// [ 'b', 'c' ]</span></span><br><span class="line"></span><br><span class="line">arr.unshift(<span class="string">'x'</span>)  <span class="comment">// 在前面添加一个元素，3</span></span><br><span class="line">arr <span class="comment">// [ 'x', 'b', 'c' ]</span></span><br><span class="line"></span><br><span class="line">arr.indexOf(<span class="string">'b'</span>)  <span class="comment">// 查找给定项在数组中的索引，若不存在返回-1，</span></span><br><span class="line"><span class="comment">// 1</span></span><br><span class="line">arr.indexOf(<span class="string">'y'</span>)  <span class="comment">// -1</span></span><br><span class="line"></span><br><span class="line">arr.join(<span class="string">'-'</span>)  <span class="comment">// 将元素拼接为一个字符串，'x-b-c'</span></span><br><span class="line">arr.join(<span class="string">''</span>)    <span class="comment">// 'xbc'</span></span><br><span class="line">arr.join()  <span class="comment">// 'x,b,c'</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="14-3-遍历数组"><a href="#14-3-遍历数组" class="headerlink" title="14.3 遍历数组"></a>14.3 遍历数组</h3><p>有几种方法可以遍历数组元素。其中两个最重要的是<code>forEach</code>和<code>map</code>。</p>
<p><code>forEach</code>遍历整个数组，并将当前元素和它的索引传递给一个函数：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">[ <span class="string">'a'</span>, <span class="string">'b'</span>, <span class="string">'c'</span> ].forEach(<span class="function"><span class="keyword">function</span> (<span class="params">elem, index</span>) </span>{  <span class="comment">// (*)</span></span><br><span class="line">    <span class="built_in">console</span>.log(index + <span class="string">'. '</span> + elem);</span><br><span class="line">});</span><br></pre></td></tr></tbody></table></figure>
<p>上面代码的输出</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="number">0.</span> a</span><br><span class="line"><span class="number">1.</span> b</span><br><span class="line"><span class="number">2.</span> c</span><br></pre></td></tr></tbody></table></figure>
<p>注意<code>（*）</code>行的函数参数是可省略的。例如：它可以只有一个参数<code>elem</code>。</p>
<p><code>map</code>创建一个新数组，通过给每个存在数组元素应用一个函数：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">[<span class="number">1</span>,<span class="number">2</span>,<span class="number">3</span>].map(<span class="function"><span class="keyword">function</span> (<span class="params">x</span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> x*x</span><br><span class="line">});</span><br><span class="line"><span class="comment">// [ 1, 4, 9 ]</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="14-4-深入阅读"><a href="#14-4-深入阅读" class="headerlink" title="14.4 深入阅读"></a>14.4 深入阅读</h3><ul>
<li><a href="https://yanhaijing.com/javascript/2014/01/17/fun-with-javascript-native-array-functions">有趣的javascript原生数组函数</a></li>
</ul>
<h2 id="15、正则表达式"><a href="#15、正则表达式" class="headerlink" title="15、正则表达式"></a>15、正则表达式</h2><p><code>JavaScript</code>内建支持正则表达式。他们被双斜线分隔：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">/^abc$/</span><br><span class="line">/[A-Za-z0<span class="number">-9</span>]+<span class="regexp">/</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="15-1-方法-test-：测试是否匹配"><a href="#15-1-方法-test-：测试是否匹配" class="headerlink" title="15.1 方法 test()：测试是否匹配"></a>15.1 方法 test()：测试是否匹配</h3><figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">/^a+b+$/.test(<span class="string">'aaab'</span>)   <span class="comment">// true</span></span><br><span class="line">/^a+b+$/.test(<span class="string">'aaa'</span>)    <span class="comment">// false</span></span><br></pre></td></tr></tbody></table></figure>
<h3 id="15-2-方法-exec-：匹配和捕获组"><a href="#15-2-方法-exec-：匹配和捕获组" class="headerlink" title="15.2 方法 exec()：匹配和捕获组"></a>15.2 方法 exec()：匹配和捕获组</h3><figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">/a(b+)a/.exec(<span class="string">'_abbba_aba_'</span>)    <span class="comment">// [ 'abbba', 'bbb' ]</span></span><br></pre></td></tr></tbody></table></figure>
<p>返回的数组第一项（索引为0）是完整匹配，捕获的第一个分组在第二项（索引为1），等。有一种方法可以反复调用获取所有匹配。</p>
<h3 id="15-3-方法-replace-：搜索并替换"><a href="#15-3-方法-replace-：搜索并替换" class="headerlink" title="15.3 方法 replace()：搜索并替换"></a>15.3 方法 replace()：搜索并替换</h3><figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">'&lt;a&gt; &lt;bbb&gt;'</span>.replace(<span class="regexp">/&lt;(.*?)&gt;/g</span>, <span class="string">'[$1]'</span>) <span class="comment">// '[a] [bbb]'</span></span><br></pre></td></tr></tbody></table></figure>
<p><code>replace</code>的第一个参数必须是正则表达式，并且开启全局搜索（<code>/g</code>标记），否则仅第一个匹配项会被替换。有一种方法使用一个函数来计算替换项。</p>
<h2 id="16、数学"><a href="#16、数学" class="headerlink" title="16、数学"></a>16、数学</h2><p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a>是一个有算数功能的对象。例如：</p>
<figure class="highlight javascript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Math</span>.abs(<span class="number">-2</span>) <span class="comment">// 2</span></span><br><span class="line"><span class="built_in">Math</span>.pow(<span class="number">3</span>, <span class="number">2</span>) <span class="comment">// 3^2 = 9</span></span><br><span class="line"><span class="built_in">Math</span>.max(<span class="number">2</span>, <span class="number">-1</span>, <span class="number">5</span>) <span class="comment">//5</span></span><br><span class="line"><span class="built_in">Math</span>.round(<span class="number">1.9</span>) <span class="comment">// 2</span></span><br><span class="line"><span class="built_in">Math</span>.cos(<span class="built_in">Math</span>.PI)  <span class="comment">// 预定义常量π，-1</span></span><br></pre></td></tr></tbody></table></figure>
<h2 id="17、标准库的其他功能"><a href="#17、标准库的其他功能" class="headerlink" title="17、标准库的其他功能"></a>17、标准库的其他功能</h2><p><code>JavaScript</code>标准库相对简单，但有很多其他东西你可以使用：</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date</a>：日期构造函数，主要功能有转换和创建日期字符串，访问日期组成部分（年，小时等）。<br><a href="https://www.2ality.com/2011/08/json-api.html">JSON</a>：一个对象，功能是转换和生成<code>JSON</code>数据。<br><a href="https://developer.mozilla.org/en-US/docs/Web/API/console">console.*</a>方法：浏览器的具体方法，不是语言成分的部分，但他们也可以在<a href="https://nodejs.org/">Node.js</a>中工作。</p>
<h2 id="18、下一步学什么"><a href="#18、下一步学什么" class="headerlink" title="18、下一步学什么"></a>18、下一步学什么</h2><p>在你学会了这篇文章的基础教程后，你可以转到大部分章节末尾提到的高级教程。此外，我建议你看下面的资源：</p>
<ul>
<li>Style guides: I have written <a href="https://www.2ality.com/2013/07/meta-style-guide.html">a guide to style guides</a></li>
<li><a href="https://underscorejs.org/">Underscore.js</a>: 一个弥补JavaScript标准库缺少的功能的库</li>
<li><a href="https://jsbooks.revolunet.com/">JSbooks – free JavaScript books</a></li>
<li><a href="https://uptodate.frontendrescue.org/">Frontend rescue: how to keep up to date on frontend technologies</a></li>
<li><a href="https://yanhaijing.com/">https://yanhaijing.com</a> 当然还有我的博客也非常不错哦</li>
<li><a href="https://yanhaijing.com/es5">https://yanhaijing.com/es5</a> 如果你想成为高手，我建议阅读<code>ecmascript</code>规范</li>
<li><a href="https://yanhaijing.com/javascript/2013/12/11/24-JavaScript-best-practices-for-beginners">给javascript初学者的24条最佳实践</a></li>
<li><a href="https://yanhaijing.com/javascript/2014/04/23/seven-javascript-quirks-i-wish-id-known-about">我希望我知道的七个JavaScript技巧</a></li>
</ul>
<p>参考自原文：<code>https://www.2ality.com/2013/06/basic-javascript.html</code><br>参考自译文：<code>https://yanhaijing.com/basejs/</code></p>
<script>
        document.querySelectorAll('.github-emoji')
          .forEach(el => {
            if (!el.dataset.src) { return; }
            const img = document.createElement('img');
            img.style = 'display:none !important;';
            img.src = el.dataset.src;
            img.addEventListener('error', () => {
              img.remove();
              el.style.color = 'inherit';
              el.style.backgroundImage = 'none';
              el.style.background = 'none';
            });
            img.addEventListener('load', () => {
              img.remove();
            });
            document.body.appendChild(img);
          });
      </script>
        </div>
        
        <div class="level is-size-7 is-uppercase">
            <div class="level-start">
                <div class="level-item">
                    <span class="is-size-6 has-text-grey has-mr-7">#</span>
                    <a class="has-link-grey -link" href="/tags/JavaScript/" rel="tag">JavaScript</a>
                </div>
            </div>
        </div>
        
        
        
        <div class="social-share"></div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/css/share.min.css">
<script src="https://cdn.jsdelivr.net/npm/social-share.js@1.0.16/dist/js/social-share.min.js"></script>
        
    </div>
</div>



<div class="card">
    <div class="card-content">
        <h3 class="menu-label has-text-centered">喜欢这篇文章？打赏一下作者吧</h3>
        <div class="buttons is-centered">
            
                
<a class="button is-info donate">
    <span class="icon is-small">
        <i class="fab fa-alipay"></i>
    </span>
    <span>支付宝</span>
    <div class="qrcode"><img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.1/images/zalipay.jpg" alt="支付宝"></div>
</a>

                
                
<a class="button is-success donate">
    <span class="icon is-small">
        <i class="fab fa-weixin"></i>
    </span>
    <span>微信</span>
    <div class="qrcode"><img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.1/images/zweixinplay.jpg" alt="微信"></div>
</a>

                
        </div>
    </div>
</div>



<div class="card card-transparent">
    <div class="level post-navigation is-flex-wrap is-mobile">
        
        <div class="level-start">
            <a class="level level-item has-link-grey  article-nav-prev" href="/posts/54a1.html">
                <i class="level-item fas fa-chevron-left"></i>
                <span class="level-item">轻量级滚动动画JavaScript库aos.js</span>
            </a>
        </div>
        
        
        <div class="level-end">
            <a class="level level-item has-link-grey  article-nav-next" href="/posts/8f77.html">
                <span class="level-item">JavaScript之再学习</span>
                <i class="level-item fas fa-chevron-right"></i>
            </a>
        </div>
        
    </div>
</div>



<div class="card">
    <div class="card-content">
        <h3 class="title is-5 has-text-weight-normal">评论</h3>
        
<div id="valine-thread" class="content"></div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine@1.3.10/dist/Valine.min.js"></script>
<script>
    new Valine({
        el: '#valine-thread' ,
        notify: false,
        verify: true,
        app_id: 'LliwJqiOd8MS79CDFo9tGFEX-gzGzoHsz',
        app_key: '05cdCDsmfHxxo8UIOvcDFaq5',
        placeholder: 'just go go'
    });
</script>

    </div>
</div>
</div>
                
    

    

    

    


    <div class="column 11 is-4-tablet is-4-desktop is-3-widescreen  has-order-1 column-left ">
        
        
<!-- 个人资料 -->
<div class="card widget">
    <div class="card-content">
        <nav class="level">
            <div class="level-item has-text-centered" style="flex-shrink: 1">
                <div>
                    
                    
                    <figure class="image is-128x128 has-mb-6">
                        <img class="is-rounded" src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.4/images/z_avater.png"
                            alt="Fox"
                            style="">
                    </figure>
                    
                    <p class="is-size-4 is-block">
                        Fox
                    </p>
                    
                    
                    
                    <p class="is-size-6 is-flex is-flex-center has-text-grey">
                        <i class="fas fa-map-marker-alt has-mr-7"></i>
                        <span>chengdu - china</span>
                    </p>
                    
                </div>
            </div>
        </nav>
        <nav class="level is-mobile">
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        文章
                    </p>
                    <a href="/archives">
                        <p class="title has-text-weight-normal">
                            17
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        分类
                    </p>
                    <a href="/categories">
                        <p class="title has-text-weight-normal">
                            5
                        </p>
                    </a>
                </div>
            </div>
            <div class="level-item has-text-centered is-marginless">
                <div>
                    <p class="heading">
                        标签
                    </p>
                    <a href="/tags">
                        <p class="title has-text-weight-normal">
                            13
                        </p>
                    </a>
                </div>
            </div>
        </nav>
        
        <div class="level">
            <a class="level-item button is-link is-rounded" href="https://github.com/foxhuli229" target="_blank"
                rel="noopener">
                关注我</a>
        </div>
        
        
        
        <div class="level is-mobile">
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Github"
                href="https://github.com/foxhuli229">
                
                <i class="fab fa-github"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Facebook"
                href="https://facebook.com">
                
                <i class="fab fa-facebook"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Twitter"
                href="https://twitter.com">
                
                <i class="fab fa-twitter"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="Dribbble"
                href="https://dribbble.com">
                
                <i class="fab fa-dribbble"></i>
                
            </a>
            
            <a class="level-item button is-white is-marginless" target="_blank" rel="noopener" title="RSS"
                href="/">
                
                <i class="fas fa-rss"></i>
                
            </a>
            
        </div>
        
    </div>
</div>
        
        
<div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                分类
            </h3>
            <ul class="menu-list">
            <li>
        <a class="level is-marginless" href="/categories/hexo/">
            <span class="level-start">
                <span class="level-item">hexo</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/categories/vue/">
            <span class="level-start">
                <span class="level-item">vue</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">3</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/">
            <span class="level-start">
                <span class="level-item">前端</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">12</span>
            </span>
        </a><ul><li>
        <a class="level is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/vue/">
            <span class="level-start">
                <span class="level-item">vue</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">1</span>
            </span>
        </a></li><li>
        <a class="level is-marginless" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">
            <span class="level-start">
                <span class="level-item">面试</span>
            </span>
            <span class="level-end">
                <span class="level-item tag">4</span>
            </span>
        </a></li></ul></li>
            </ul>
        </div>
    </div>
</div>
        
        <div class="card widget">
    <div class="card-content">
        <div class="menu">
            <h3 class="menu-label">
                标签
            </h3>
            <div class="field is-grouped is-grouped-multiline">
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/JavaScript/">
                        <span class="tag">JavaScript</span>
                        <span class="tag is-grey">5</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/SVG/">
                        <span class="tag">SVG</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/cookie-%E4%B8%8E-webstorage%E7%9A%84%E5%8C%BA%E5%88%AB/">
                        <span class="tag">cookie 与 webstorage的区别</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/hexo/">
                        <span class="tag">hexo</span>
                        <span class="tag is-grey">2</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/hexo-theme-matery/">
                        <span class="tag">hexo-theme-matery</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/lightgallery-js/">
                        <span class="tag">lightgallery.js</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue/">
                        <span class="tag">vue</span>
                        <span class="tag is-grey">2</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue-admin-template/">
                        <span class="tag">vue-admin-template</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue%E5%BC%82%E6%AD%A5%E5%8A%A0%E8%BD%BD%E6%A8%A1%E5%9D%97/">
                        <span class="tag">vue异步加载模块</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/vue%E7%BB%84%E4%BB%B6/">
                        <span class="tag">vue组件</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/">
                        <span class="tag">前端面试</span>
                        <span class="tag is-grey">3</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/%E5%8E%BB%E5%93%AA%E5%84%BF%E7%BD%91/">
                        <span class="tag">去哪儿网</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
                <div class="control">
                    <a class="tags has-addons" href="/tags/%E6%95%B0%E7%BB%84/">
                        <span class="tag">数组</span>
                        <span class="tag is-grey">1</span>
                    </a>
                </div>
                
            </div>
        </div>
    </div>
</div>
        
        
        <div class="column-right-shadow is-hidden-widescreen ">
            
            <!-- 个人信息-目录 -->


    <div class="card widget" id="toc">
        <div class="card-content">
            <div class="menu">
                <h3 class="menu-label">
                    目录
                </h3>
                <ul class="menu-list"><li>
        <a class="is-flex" href="#1、JavaScript介绍">
        <span class="has-mr-6">1</span>
        <span>1、JavaScript介绍</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1-1-语言的性质">
        <span class="has-mr-6">1.1</span>
        <span>1.1 语言的性质</span>
        </a></li><li>
        <a class="is-flex" href="#1-2-JavaScript能做什么">
        <span class="has-mr-6">1.2</span>
        <span>1.2 JavaScript能做什么</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#2、-JavaScript语法">
        <span class="has-mr-6">2</span>
        <span>2、 JavaScript语法</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#2-1-语句和表达式">
        <span class="has-mr-6">2.1</span>
        <span>2.1 语句和表达式</span>
        </a></li><li>
        <a class="is-flex" href="#2-2-流程控制语句和语句块">
        <span class="has-mr-6">2.2</span>
        <span>2.2 流程控制语句和语句块</span>
        </a></li><li>
        <a class="is-flex" href="#2-3-分号">
        <span class="has-mr-6">2.3</span>
        <span>2.3 分号</span>
        </a></li><li>
        <a class="is-flex" href="#2-4-注释">
        <span class="has-mr-6">2.4</span>
        <span>2.4 注释</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#3、变量和赋值">
        <span class="has-mr-6">3</span>
        <span>3、变量和赋值</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#3-1-赋值">
        <span class="has-mr-6">3.1</span>
        <span>3.1 赋值</span>
        </a></li><li>
        <a class="is-flex" href="#3-2-复合赋值操作符">
        <span class="has-mr-6">3.2</span>
        <span>3.2 复合赋值操作符</span>
        </a></li><li>
        <a class="is-flex" href="#3-3-标识符和变量名">
        <span class="has-mr-6">3.3</span>
        <span>3.3 标识符和变量名</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#4、值">
        <span class="has-mr-6">4</span>
        <span>4、值</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#4-1-原始类型值和对象">
        <span class="has-mr-6">4.1</span>
        <span>4.1 原始类型值和对象</span>
        </a></li><li>
        <a class="is-flex" href="#4-2-原始类型值">
        <span class="has-mr-6">4.2</span>
        <span>4.2 原始类型值</span>
        </a></li><li>
        <a class="is-flex" href="#4-3-对象">
        <span class="has-mr-6">4.3</span>
        <span>4.3 对象</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#4-3-1-对象的类型">
        <span class="has-mr-6">4.3.1</span>
        <span>4.3.1 对象的类型</span>
        </a></li><li>
        <a class="is-flex" href="#4-3-2-对象的特征">
        <span class="has-mr-6">4.3.2</span>
        <span>4.3.2 对象的特征</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#4-4-undefined-和-null">
        <span class="has-mr-6">4.4</span>
        <span>4.4 undefined 和 null</span>
        </a></li><li>
        <a class="is-flex" href="#4-5-包装类型">
        <span class="has-mr-6">4.5</span>
        <span>4.5 包装类型</span>
        </a></li><li>
        <a class="is-flex" href="#4-6-通过typeof和instanceof将值分类">
        <span class="has-mr-6">4.6</span>
        <span>4.6 通过typeof和instanceof将值分类</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#4-6-1-typeof-使用方法如下">
        <span class="has-mr-6">4.6.1</span>
        <span>4.6.1 typeof 使用方法如下</span>
        </a></li><li>
        <a class="is-flex" href="#4-6-2-instanceof使用方法如下">
        <span class="has-mr-6">4.6.2</span>
        <span>4.6.2 instanceof使用方法如下</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#4-7-深入阅读">
        <span class="has-mr-6">4.7</span>
        <span>4.7 深入阅读</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#5、布尔">
        <span class="has-mr-6">5</span>
        <span>5、布尔</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#5-1-真值和假值">
        <span class="has-mr-6">5.1</span>
        <span>5.1 真值和假值</span>
        </a></li><li>
        <a class="is-flex" href="#5-2-二元逻辑运算符">
        <span class="has-mr-6">5.2</span>
        <span>5.2 二元逻辑运算符</span>
        </a></li><li>
        <a class="is-flex" href="#5-3-等值运算符">
        <span class="has-mr-6">5.3</span>
        <span>5.3 等值运算符</span>
        </a></li><li>
        <a class="is-flex" href="#5-4-深入阅读">
        <span class="has-mr-6">5.4</span>
        <span>5.4 深入阅读</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#6、数字">
        <span class="has-mr-6">6</span>
        <span>6、数字</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#6-1-运算符">
        <span class="has-mr-6">6.1</span>
        <span>6.1 运算符</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#7、字符串">
        <span class="has-mr-6">7</span>
        <span>7、字符串</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#7-1-字符串运算符">
        <span class="has-mr-6">7.1</span>
        <span>7.1 字符串运算符</span>
        </a></li><li>
        <a class="is-flex" href="#7-2-字符串方法">
        <span class="has-mr-6">7.2</span>
        <span>7.2 字符串方法</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#8、语句">
        <span class="has-mr-6">8</span>
        <span>8、语句</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#8-1-条件（Conditionals）">
        <span class="has-mr-6">8.1</span>
        <span>8.1 条件（Conditionals）</span>
        </a></li><li>
        <a class="is-flex" href="#8-2-循环（Loops）">
        <span class="has-mr-6">8.2</span>
        <span>8.2 循环（Loops）</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#9、函数">
        <span class="has-mr-6">9</span>
        <span>9、函数</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#函数声明提升">
        <span class="has-mr-6">9.1</span>
        <span>函数声明提升</span>
        </a></li><li>
        <a class="is-flex" href="#9-1-特殊变量参数">
        <span class="has-mr-6">9.2</span>
        <span>9.1 特殊变量参数</span>
        </a></li><li>
        <a class="is-flex" href="#9-2-太多或太少参数">
        <span class="has-mr-6">9.3</span>
        <span>9.2 太多或太少参数</span>
        </a></li><li>
        <a class="is-flex" href="#9-3-可选参数">
        <span class="has-mr-6">9.4</span>
        <span>9.3 可选参数</span>
        </a></li><li>
        <a class="is-flex" href="#9-4-强制数量">
        <span class="has-mr-6">9.5</span>
        <span>9.4 强制数量</span>
        </a></li><li>
        <a class="is-flex" href="#9-5-将arguments-转换为数组">
        <span class="has-mr-6">9.6</span>
        <span>9.5 将arguments 转换为数组</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#10、异常处理">
        <span class="has-mr-6">10</span>
        <span>10、异常处理</span>
        </a></li><li>
        <a class="is-flex" href="#11、严格模式">
        <span class="has-mr-6">11</span>
        <span>11、严格模式</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#11-1-明确错误">
        <span class="has-mr-6">11.1</span>
        <span>11.1 明确错误</span>
        </a></li><li>
        <a class="is-flex" href="#不是方法的函数中的this">
        <span class="has-mr-6">11.2</span>
        <span>不是方法的函数中的this</span>
        </a></li><li>
        <a class="is-flex" href="#11-2-不再自动创建全局变量">
        <span class="has-mr-6">11.3</span>
        <span>11.2 不再自动创建全局变量</span>
        </a></li><li>
        <a class="is-flex" href="#11-3-深入阅读">
        <span class="has-mr-6">11.4</span>
        <span>11.3 深入阅读</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#12、变量作用域和闭包">
        <span class="has-mr-6">12</span>
        <span>12、变量作用域和闭包</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#12-1-变量和函数作用域">
        <span class="has-mr-6">12.1</span>
        <span>12.1 变量和函数作用域</span>
        </a></li><li>
        <a class="is-flex" href="#12-2-变量提升">
        <span class="has-mr-6">12.2</span>
        <span>12.2 变量提升</span>
        </a></li><li>
        <a class="is-flex" href="#12-3-闭包">
        <span class="has-mr-6">12.3</span>
        <span>12.3 闭包</span>
        </a></li><li>
        <a class="is-flex" href="#12-4-IIFE：模拟块级作用域">
        <span class="has-mr-6">12.4</span>
        <span>12.4 IIFE：模拟块级作用域</span>
        </a></li><li>
        <a class="is-flex" href="#12-5-闭包实现变量共享">
        <span class="has-mr-6">12.5</span>
        <span>12.5 闭包实现变量共享</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#13、对象和继承">
        <span class="has-mr-6">13</span>
        <span>13、对象和继承</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#13-1-单个对象">
        <span class="has-mr-6">13.1</span>
        <span>13.1 单个对象</span>
        </a></li><li>
        <a class="is-flex" href="#13-2-任意键属性">
        <span class="has-mr-6">13.2</span>
        <span>13.2 任意键属性</span>
        </a></li><li>
        <a class="is-flex" href="#13-3-引用方法">
        <span class="has-mr-6">13.3</span>
        <span>13.3 引用方法</span>
        </a></li><li>
        <a class="is-flex" href="#13-4-方法内部的函数">
        <span class="has-mr-6">13.4</span>
        <span>13.4 方法内部的函数</span>
        </a></li><li>
        <a class="is-flex" href="#13-5-构造函数：对象工厂">
        <span class="has-mr-6">13.5</span>
        <span>13.5 构造函数：对象工厂</span>
        </a></li><li>
        <a class="is-flex" href="#13-6-深入阅读">
        <span class="has-mr-6">13.6</span>
        <span>13.6 深入阅读</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#14、数组">
        <span class="has-mr-6">14</span>
        <span>14、数组</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#14-1-数组字面量">
        <span class="has-mr-6">14.1</span>
        <span>14.1 数组字面量</span>
        </a></li><li>
        <a class="is-flex" href="#14-2-数组方法">
        <span class="has-mr-6">14.2</span>
        <span>14.2 数组方法</span>
        </a></li><li>
        <a class="is-flex" href="#14-3-遍历数组">
        <span class="has-mr-6">14.3</span>
        <span>14.3 遍历数组</span>
        </a></li><li>
        <a class="is-flex" href="#14-4-深入阅读">
        <span class="has-mr-6">14.4</span>
        <span>14.4 深入阅读</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#15、正则表达式">
        <span class="has-mr-6">15</span>
        <span>15、正则表达式</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#15-1-方法-test-：测试是否匹配">
        <span class="has-mr-6">15.1</span>
        <span>15.1 方法 test()：测试是否匹配</span>
        </a></li><li>
        <a class="is-flex" href="#15-2-方法-exec-：匹配和捕获组">
        <span class="has-mr-6">15.2</span>
        <span>15.2 方法 exec()：匹配和捕获组</span>
        </a></li><li>
        <a class="is-flex" href="#15-3-方法-replace-：搜索并替换">
        <span class="has-mr-6">15.3</span>
        <span>15.3 方法 replace()：搜索并替换</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#16、数学">
        <span class="has-mr-6">16</span>
        <span>16、数学</span>
        </a></li><li>
        <a class="is-flex" href="#17、标准库的其他功能">
        <span class="has-mr-6">17</span>
        <span>17、标准库的其他功能</span>
        </a></li><li>
        <a class="is-flex" href="#18、下一步学什么">
        <span class="has-mr-6">18</span>
        <span>18、下一步学什么</span>
        </a></li></ul>
            </div>
        </div>
    </div>

            
            <!-- 最近/最新的文章 -->
<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            最新文章
        </h3>
        
        <article class="media">
            
            <a href="/posts/7358.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="component组件嵌套，导致页面重复渲染，重复请求的bug">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-23T02:18:20.000Z">2020-05-23</time></div>
                    <a href="/posts/7358.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">component组件嵌套，导致页面重复渲染，重复请求的bug</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/2b18.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="vue异步加载模块">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-22T23:18:18.000Z">2020-05-23</time></div>
                    <a href="/posts/2b18.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue异步加载模块</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/54f1.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://panjiachen.gitee.io/vue-element-admin-site/home.png" alt="vue-admin-template模板添加tagsview">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T16:22:02.000Z">2020-05-03</time></div>
                    <a href="/posts/54f1.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue-admin-template模板添加tagsview</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/1d48.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1051132835,1344326547&amp;fm=26&amp;gp=0.jpg" alt="关于 hexo 对文章渲染 {{ }} 解析的问题">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T09:40:49.000Z">2020-05-02</time></div>
                    <a href="/posts/1d48.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">关于 hexo 对文章渲染 {{ }} 解析的问题</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/hexo/">hexo</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/6659.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1102488500,1890914533&amp;fm=26&amp;gp=0.jpg" alt="初级前端综合面试题-3">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-04-26T05:14:51.000Z">2020-04-26</time></div>
                    <a href="/posts/6659.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">初级前端综合面试题-3</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a> / <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">面试</a>
                    </p>
                </div>
            </div>
        </article>
        
    </div>
</div>
            
            <!-- 个人信息-归档 -->
<div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/archives/2020/05/">
                <span class="level-start">
                    <span class="level-item">五月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/04/">
                <span class="level-start">
                    <span class="level-item">四月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">8</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/01/">
                <span class="level-start">
                    <span class="level-item">一月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2019/12/">
                <span class="level-start">
                    <span class="level-item">十二月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
            
        </div>
        
    </div>


                
    

    

    

    


    <div class="column 11 is-4-tablet is-4-desktop is-3-widescreen is-hidden-touch is-hidden-desktop-only has-order-3 column-right ">
        
        <!-- 个人信息-目录 -->


    <div class="card widget" id="toc">
        <div class="card-content">
            <div class="menu">
                <h3 class="menu-label">
                    目录
                </h3>
                <ul class="menu-list"><li>
        <a class="is-flex" href="#1、JavaScript介绍">
        <span class="has-mr-6">1</span>
        <span>1、JavaScript介绍</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#1-1-语言的性质">
        <span class="has-mr-6">1.1</span>
        <span>1.1 语言的性质</span>
        </a></li><li>
        <a class="is-flex" href="#1-2-JavaScript能做什么">
        <span class="has-mr-6">1.2</span>
        <span>1.2 JavaScript能做什么</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#2、-JavaScript语法">
        <span class="has-mr-6">2</span>
        <span>2、 JavaScript语法</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#2-1-语句和表达式">
        <span class="has-mr-6">2.1</span>
        <span>2.1 语句和表达式</span>
        </a></li><li>
        <a class="is-flex" href="#2-2-流程控制语句和语句块">
        <span class="has-mr-6">2.2</span>
        <span>2.2 流程控制语句和语句块</span>
        </a></li><li>
        <a class="is-flex" href="#2-3-分号">
        <span class="has-mr-6">2.3</span>
        <span>2.3 分号</span>
        </a></li><li>
        <a class="is-flex" href="#2-4-注释">
        <span class="has-mr-6">2.4</span>
        <span>2.4 注释</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#3、变量和赋值">
        <span class="has-mr-6">3</span>
        <span>3、变量和赋值</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#3-1-赋值">
        <span class="has-mr-6">3.1</span>
        <span>3.1 赋值</span>
        </a></li><li>
        <a class="is-flex" href="#3-2-复合赋值操作符">
        <span class="has-mr-6">3.2</span>
        <span>3.2 复合赋值操作符</span>
        </a></li><li>
        <a class="is-flex" href="#3-3-标识符和变量名">
        <span class="has-mr-6">3.3</span>
        <span>3.3 标识符和变量名</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#4、值">
        <span class="has-mr-6">4</span>
        <span>4、值</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#4-1-原始类型值和对象">
        <span class="has-mr-6">4.1</span>
        <span>4.1 原始类型值和对象</span>
        </a></li><li>
        <a class="is-flex" href="#4-2-原始类型值">
        <span class="has-mr-6">4.2</span>
        <span>4.2 原始类型值</span>
        </a></li><li>
        <a class="is-flex" href="#4-3-对象">
        <span class="has-mr-6">4.3</span>
        <span>4.3 对象</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#4-3-1-对象的类型">
        <span class="has-mr-6">4.3.1</span>
        <span>4.3.1 对象的类型</span>
        </a></li><li>
        <a class="is-flex" href="#4-3-2-对象的特征">
        <span class="has-mr-6">4.3.2</span>
        <span>4.3.2 对象的特征</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#4-4-undefined-和-null">
        <span class="has-mr-6">4.4</span>
        <span>4.4 undefined 和 null</span>
        </a></li><li>
        <a class="is-flex" href="#4-5-包装类型">
        <span class="has-mr-6">4.5</span>
        <span>4.5 包装类型</span>
        </a></li><li>
        <a class="is-flex" href="#4-6-通过typeof和instanceof将值分类">
        <span class="has-mr-6">4.6</span>
        <span>4.6 通过typeof和instanceof将值分类</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#4-6-1-typeof-使用方法如下">
        <span class="has-mr-6">4.6.1</span>
        <span>4.6.1 typeof 使用方法如下</span>
        </a></li><li>
        <a class="is-flex" href="#4-6-2-instanceof使用方法如下">
        <span class="has-mr-6">4.6.2</span>
        <span>4.6.2 instanceof使用方法如下</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#4-7-深入阅读">
        <span class="has-mr-6">4.7</span>
        <span>4.7 深入阅读</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#5、布尔">
        <span class="has-mr-6">5</span>
        <span>5、布尔</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#5-1-真值和假值">
        <span class="has-mr-6">5.1</span>
        <span>5.1 真值和假值</span>
        </a></li><li>
        <a class="is-flex" href="#5-2-二元逻辑运算符">
        <span class="has-mr-6">5.2</span>
        <span>5.2 二元逻辑运算符</span>
        </a></li><li>
        <a class="is-flex" href="#5-3-等值运算符">
        <span class="has-mr-6">5.3</span>
        <span>5.3 等值运算符</span>
        </a></li><li>
        <a class="is-flex" href="#5-4-深入阅读">
        <span class="has-mr-6">5.4</span>
        <span>5.4 深入阅读</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#6、数字">
        <span class="has-mr-6">6</span>
        <span>6、数字</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#6-1-运算符">
        <span class="has-mr-6">6.1</span>
        <span>6.1 运算符</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#7、字符串">
        <span class="has-mr-6">7</span>
        <span>7、字符串</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#7-1-字符串运算符">
        <span class="has-mr-6">7.1</span>
        <span>7.1 字符串运算符</span>
        </a></li><li>
        <a class="is-flex" href="#7-2-字符串方法">
        <span class="has-mr-6">7.2</span>
        <span>7.2 字符串方法</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#8、语句">
        <span class="has-mr-6">8</span>
        <span>8、语句</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#8-1-条件（Conditionals）">
        <span class="has-mr-6">8.1</span>
        <span>8.1 条件（Conditionals）</span>
        </a></li><li>
        <a class="is-flex" href="#8-2-循环（Loops）">
        <span class="has-mr-6">8.2</span>
        <span>8.2 循环（Loops）</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#9、函数">
        <span class="has-mr-6">9</span>
        <span>9、函数</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#函数声明提升">
        <span class="has-mr-6">9.1</span>
        <span>函数声明提升</span>
        </a></li><li>
        <a class="is-flex" href="#9-1-特殊变量参数">
        <span class="has-mr-6">9.2</span>
        <span>9.1 特殊变量参数</span>
        </a></li><li>
        <a class="is-flex" href="#9-2-太多或太少参数">
        <span class="has-mr-6">9.3</span>
        <span>9.2 太多或太少参数</span>
        </a></li><li>
        <a class="is-flex" href="#9-3-可选参数">
        <span class="has-mr-6">9.4</span>
        <span>9.3 可选参数</span>
        </a></li><li>
        <a class="is-flex" href="#9-4-强制数量">
        <span class="has-mr-6">9.5</span>
        <span>9.4 强制数量</span>
        </a></li><li>
        <a class="is-flex" href="#9-5-将arguments-转换为数组">
        <span class="has-mr-6">9.6</span>
        <span>9.5 将arguments 转换为数组</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#10、异常处理">
        <span class="has-mr-6">10</span>
        <span>10、异常处理</span>
        </a></li><li>
        <a class="is-flex" href="#11、严格模式">
        <span class="has-mr-6">11</span>
        <span>11、严格模式</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#11-1-明确错误">
        <span class="has-mr-6">11.1</span>
        <span>11.1 明确错误</span>
        </a></li><li>
        <a class="is-flex" href="#不是方法的函数中的this">
        <span class="has-mr-6">11.2</span>
        <span>不是方法的函数中的this</span>
        </a></li><li>
        <a class="is-flex" href="#11-2-不再自动创建全局变量">
        <span class="has-mr-6">11.3</span>
        <span>11.2 不再自动创建全局变量</span>
        </a></li><li>
        <a class="is-flex" href="#11-3-深入阅读">
        <span class="has-mr-6">11.4</span>
        <span>11.3 深入阅读</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#12、变量作用域和闭包">
        <span class="has-mr-6">12</span>
        <span>12、变量作用域和闭包</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#12-1-变量和函数作用域">
        <span class="has-mr-6">12.1</span>
        <span>12.1 变量和函数作用域</span>
        </a></li><li>
        <a class="is-flex" href="#12-2-变量提升">
        <span class="has-mr-6">12.2</span>
        <span>12.2 变量提升</span>
        </a></li><li>
        <a class="is-flex" href="#12-3-闭包">
        <span class="has-mr-6">12.3</span>
        <span>12.3 闭包</span>
        </a></li><li>
        <a class="is-flex" href="#12-4-IIFE：模拟块级作用域">
        <span class="has-mr-6">12.4</span>
        <span>12.4 IIFE：模拟块级作用域</span>
        </a></li><li>
        <a class="is-flex" href="#12-5-闭包实现变量共享">
        <span class="has-mr-6">12.5</span>
        <span>12.5 闭包实现变量共享</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#13、对象和继承">
        <span class="has-mr-6">13</span>
        <span>13、对象和继承</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#13-1-单个对象">
        <span class="has-mr-6">13.1</span>
        <span>13.1 单个对象</span>
        </a></li><li>
        <a class="is-flex" href="#13-2-任意键属性">
        <span class="has-mr-6">13.2</span>
        <span>13.2 任意键属性</span>
        </a></li><li>
        <a class="is-flex" href="#13-3-引用方法">
        <span class="has-mr-6">13.3</span>
        <span>13.3 引用方法</span>
        </a></li><li>
        <a class="is-flex" href="#13-4-方法内部的函数">
        <span class="has-mr-6">13.4</span>
        <span>13.4 方法内部的函数</span>
        </a></li><li>
        <a class="is-flex" href="#13-5-构造函数：对象工厂">
        <span class="has-mr-6">13.5</span>
        <span>13.5 构造函数：对象工厂</span>
        </a></li><li>
        <a class="is-flex" href="#13-6-深入阅读">
        <span class="has-mr-6">13.6</span>
        <span>13.6 深入阅读</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#14、数组">
        <span class="has-mr-6">14</span>
        <span>14、数组</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#14-1-数组字面量">
        <span class="has-mr-6">14.1</span>
        <span>14.1 数组字面量</span>
        </a></li><li>
        <a class="is-flex" href="#14-2-数组方法">
        <span class="has-mr-6">14.2</span>
        <span>14.2 数组方法</span>
        </a></li><li>
        <a class="is-flex" href="#14-3-遍历数组">
        <span class="has-mr-6">14.3</span>
        <span>14.3 遍历数组</span>
        </a></li><li>
        <a class="is-flex" href="#14-4-深入阅读">
        <span class="has-mr-6">14.4</span>
        <span>14.4 深入阅读</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#15、正则表达式">
        <span class="has-mr-6">15</span>
        <span>15、正则表达式</span>
        </a><ul class="menu-list"><li>
        <a class="is-flex" href="#15-1-方法-test-：测试是否匹配">
        <span class="has-mr-6">15.1</span>
        <span>15.1 方法 test()：测试是否匹配</span>
        </a></li><li>
        <a class="is-flex" href="#15-2-方法-exec-：匹配和捕获组">
        <span class="has-mr-6">15.2</span>
        <span>15.2 方法 exec()：匹配和捕获组</span>
        </a></li><li>
        <a class="is-flex" href="#15-3-方法-replace-：搜索并替换">
        <span class="has-mr-6">15.3</span>
        <span>15.3 方法 replace()：搜索并替换</span>
        </a></li></ul></li><li>
        <a class="is-flex" href="#16、数学">
        <span class="has-mr-6">16</span>
        <span>16、数学</span>
        </a></li><li>
        <a class="is-flex" href="#17、标准库的其他功能">
        <span class="has-mr-6">17</span>
        <span>17、标准库的其他功能</span>
        </a></li><li>
        <a class="is-flex" href="#18、下一步学什么">
        <span class="has-mr-6">18</span>
        <span>18、下一步学什么</span>
        </a></li></ul>
            </div>
        </div>
    </div>

        
        <!-- 最近/最新的文章 -->
<div class="card widget">
    <div class="card-content">
        <h3 class="menu-label">
            最新文章
        </h3>
        
        <article class="media">
            
            <a href="/posts/7358.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="component组件嵌套，导致页面重复渲染，重复请求的bug">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-23T02:18:20.000Z">2020-05-23</time></div>
                    <a href="/posts/7358.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">component组件嵌套，导致页面重复渲染，重复请求的bug</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/2b18.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://cn.vuejs.org/images/logo.png" alt="vue异步加载模块">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-22T23:18:18.000Z">2020-05-23</time></div>
                    <a href="/posts/2b18.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue异步加载模块</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/54f1.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://panjiachen.gitee.io/vue-element-admin-site/home.png" alt="vue-admin-template模板添加tagsview">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T16:22:02.000Z">2020-05-03</time></div>
                    <a href="/posts/54f1.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">vue-admin-template模板添加tagsview</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/vue/">vue</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/1d48.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1051132835,1344326547&amp;fm=26&amp;gp=0.jpg" alt="关于 hexo 对文章渲染 {{ }} 解析的问题">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-05-02T09:40:49.000Z">2020-05-02</time></div>
                    <a href="/posts/1d48.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">关于 hexo 对文章渲染 {{ }} 解析的问题</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/hexo/">hexo</a>
                    </p>
                </div>
            </div>
        </article>
        
        <article class="media">
            
            <a href="/posts/6659.html" class="media-left">
                <p class="image is-64x64">
                    <img class="thumbnail" src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1102488500,1890914533&amp;fm=26&amp;gp=0.jpg" alt="初级前端综合面试题-3">
                </p>
            </a>
            
            <div class="media-content">
                <div class="content">
                    <div><time class="has-text-grey is-size-7 is-uppercase" datetime="2020-04-26T05:14:51.000Z">2020-04-26</time></div>
                    <a href="/posts/6659.html" class="title has-link-black-ter is-size-6 has-text-weight-normal">初级前端综合面试题-3</a>
                    <p class="is-size-7 is-uppercase">
                        <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/">前端</a> / <a class="has-link-grey -link" href="/categories/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E8%AF%95/">面试</a>
                    </p>
                </div>
            </div>
        </article>
        
    </div>
</div>
        
        <!-- 个人信息-归档 -->
<div class="card widget">
    <div class="card-content">
        <div class="menu">
        <h3 class="menu-label">
            归档
        </h3>
        <ul class="menu-list">
        
        <li>
            <a class="level is-marginless" href="/archives/2020/05/">
                <span class="level-start">
                    <span class="level-item">五月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">4</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/04/">
                <span class="level-start">
                    <span class="level-item">四月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/03/">
                <span class="level-start">
                    <span class="level-item">三月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">8</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2020/01/">
                <span class="level-start">
                    <span class="level-item">一月 2020</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">1</span>
                </span>
            </a>
        </li>
        
        <li>
            <a class="level is-marginless" href="/archives/2019/12/">
                <span class="level-start">
                    <span class="level-item">十二月 2019</span>
                </span>
                <span class="level-end">
                    <span class="level-item tag">2</span>
                </span>
            </a>
        </li>
        
        </ul>
        </div>
    </div>
</div>
        
        
    </div>


            </div>
        </div>
    </section>
    <footer class="footer">
    <div class="container">
        <div class="level">
            <div class="level-start has-text-centered-mobile">
                <!-- <a class="footer-logo is-block has-mb-6" href="/">
                    
                    <img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.5/images/foxlogo.png" alt="JavaScript基础教程" height="28">
                    
                </a> -->
                <p class="is-size-7">

                    
                    <!-- 不蒜子统计 -->
                    <span id="busuanzi_container_site_uv">
                        ❤️ 感谢 <span id="busuanzi_value_site_uv">0</span> 位小伙伴
                        的 <span id="busuanzi_value_page_pv">0</span> 次陪伴
                    </span>
                    

                    
                        <br>
                        <span id="sitetime">载入运行时间...</span>
                        <script>
                            function siteTime() {
                                var seconds = 1000;
                                var minutes = seconds * 60;
                                var hours = minutes * 60;
                                var days = hours * 24;
                                var years = days * 365;
                                var today = new Date();
                                var startYear = "2020";
                                var startMonth = "3";
                                var startDate = "08";
                                var startHour = "0";
                                var startMinute = "0";
                                var startSecond = "0";
                                var todayYear = today.getFullYear();
                                var todayMonth = today.getMonth() + 1;
                                var todayDate = today.getDate();
                                var todayHour = today.getHours();
                                var todayMinute = today.getMinutes();
                                var todaySecond = today.getSeconds();
                                var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
                                var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
                                var diff = t2 - t1;
                                var diffYears = Math.floor(diff / years);
                                var diffDays = Math.floor((diff / days) - diffYears * 365);
                                var diffHours = Math.floor((diff - (diffYears * 365 + diffDays) * days) / hours);
                                var diffMinutes = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours) /
                                    minutes);
                                var diffSeconds = Math.floor((diff - (diffYears * 365 + diffDays) * days - diffHours * hours -
                                    diffMinutes * minutes) / seconds);
                                if (startYear == todayYear) {
                                    // document.getElementById("year").innerHTML = todayYear;
                                    document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffDays + " 天 " + diffHours +
                                        " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                                } else {
                                    // document.getElementById("year").innerHTML = startYear + " - " + todayYear;
                                    document.getElementById("sitetime").innerHTML = "本站已安全运行 " + diffYears + " 年 " + diffDays +
                                        " 天 " + diffHours + " 小时 " + diffMinutes + " 分钟 " + diffSeconds + " 秒";
                                }
                            }
                            setInterval(siteTime, 1000);
                        </script>
                    

                    <!-- 站长统计 -->
                    
                        <br>
                        <script type="text/javascript">
                            document.write(unescape("%3Cspan id='cnzz_stat_icon_1278694833'%3E%3C/span%3E%3Cscript src='https://s9.cnzz.com/z_stat.php%3Fid%3D1278694833%26online%3D1%26show%3Dline' type='text/javascript'%3E%3C/script%3E"));
                        </script>
                    

                    <!-- 域名信息 -->
                    
                    <br>
                    <span id="icp"><img src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/medias/icp.png"
                            style="vertical-align: text-bottom;" />
                        <a href="http://beian.miit.gov.cn/state/outPortal/loginPortal.action" target="_blank">渝ICP备18015404号</a>
                    </span>
                    

                    <br>
                    <!-- 版权信息 -->
                    
                    &copy; 2020 Fox&nbsp;
                    Powered by <a href="https://hexo.io/" target="_blank" rel="noopener">Hexo</a> & <a
                        href="https://github.com/ppoffice/hexo-theme-icarus" target="_blank" rel="noopener">Icarus</a>
                    & <a href="https://foxhuli.top/" target="_blank" rel="noopener">Fox</a>
                </p>
            </div>

            <!-- 访问链接 -->
            <div class="level-end">
                
                <div class="field has-addons is-flex-center-mobile has-mt-5-mobile is-flex-wrap is-flex-middle">
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="掘金"
                            href="https://juejin.im/user/5d36544b6fb9a07efd474ae0/">
                            
                                
                                    <span>掘</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="简书"
                            href="https://www.jianshu.com/u/e1f2e756cb5e/">
                            
                                
                                    <span>简</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="知乎"
                            href="https://www.zhihu.com/people/hu-li-60-36-4/activities/">
                            
                                
                                    <span>知</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="CDSN"
                            href="https://blog.csdn.net/xiaohuli_hyr/">
                            
                                
                                    <span>C</span>
                                
                            
                        </a>
                    </p>
                    
                    <p class="control">
                        <a class="button is-white is-large" target="_blank"
                            rel="noopener" title="My GitHub"
                            href="https://github.com/foxhuli229?tab=repositories">
                            
                                
                                    <i class="fab fa-github"></i>
                                
                            
                        </a>
                    </p>
                    
                </div>
                
            </div>

        </div>
    </div>
</footer>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/min/moment-with-locales.min.js"></script>
<script>moment.locale("zh-CN");</script>


<script>
var IcarusThemeSettings = {
    site: {
        url: 'https://foxhuli.top',
        external_link: {"enable":true,"exclude":[]}
    },
    article: {
        highlight: {
            clipboard: true,
            fold: 'unfolded'
        }
    }
};
</script>


<script src="https://cdn.jsdelivr.net/npm/clipboard@2.0.4/dist/clipboard.min.js" defer></script>





<script src="/js/animation.js"></script>



<script src="https://cdn.jsdelivr.net/npm/lightgallery@1.6.8/dist/js/lightgallery.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js" defer></script>
<script src="/js/gallery.js" defer></script>



<div id="outdated">
    <h6>Your browser is out-of-date!</h6>
    <p>Update your browser to view this website correctly. <a id="btnUpdateBrowser" href="http://outdatedbrowser.com/">Update
            my browser now </a></p>
    <p class="last"><a href="#" id="btnCloseUpdateBrowser" title="Close">&times;</a></p>
</div>
<script src="https://cdn.jsdelivr.net/npm/outdatedbrowser@1.1.5/outdatedbrowser/outdatedbrowser.min.js" defer></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        outdatedBrowser({
            bgColor: '#f25648',
            color: '#ffffff',
            lowerThan: 'flex'
        });
    });
</script>





<a id="back-to-top" title="回到顶端" href="javascript:;">
    <i class="fas fa-chevron-up"></i>
</a>
<script src="/js/back-to-top.js" defer></script>














<script src="/js/main.js" defer></script>

    
    <div class="searchbox ins-search">
    <div class="searchbox-container ins-search-container">
        <div class="searchbox-input-wrapper">
            <input type="text" class="searchbox-input ins-search-input" placeholder="想要查找什么..." />
            <span class="searchbox-close ins-close ins-selectable"><i class="fa fa-times-circle"></i></span>
        </div>
        <div class="searchbox-result-wrapper ins-section-wrapper">
            <div class="ins-section-container"></div>
        </div>
    </div>
</div>
<script>
    (function (window) {
        var INSIGHT_CONFIG = {
            TRANSLATION: {
                POSTS: '文章',
                PAGES: '页面',
                CATEGORIES: '分类',
                TAGS: '标签',
                UNTITLED: '(无标题)',
            },
            CONTENT_URL: '/content.json',
        };
        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
    })(window);
</script>
<script src="/js/insight.js" defer></script>
<link rel="stylesheet" href="/css/search.css">
<link rel="stylesheet" href="/css/insight.css">
    
    

    <script src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/libs/jquery/jquery.min.js"></script>

    <!-- 引用 鼠标点击实现文字效果 -->
    <script src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/js/click_show_text.js"></script>

    <!-- //只在桌面版网页启用特效 -->
    <!-- <script type="text/javascript">
        var windowWidth = $(window).width();
        if (windowWidth > 768) {
            document.write('<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/js/sakura.js"><\/script>');
        }
    </script> -->

     <!-- 实现 鼠标划过彩虹星星掉落跟随效果 -->
     <!-- <script src="https://cdn.jsdelivr.net/gh/foxhuli229/cdn@1.0/source/js/cursor.js"></script> -->

      <!-- tidio聊天工具 -->
    <!-- <script src="//code.tidio.co/hcpgs6vy7zc60cdqvx033yuue25y9vgj.js" async></script> -->

<script type="text/x-mathjax-config">
    MathJax.Hub.Config({
        tex2jax: {
            inlineMath: [ ["$","$"], ["\\(","\\)"] ],
            skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
            processEscapes: true
        }
    });
    MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax();
        for (var i = 0; i < all.length; ++i)
            all[i].SourceElement().parentNode.className += ' has-jax';
    });
</script>
<script src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script>if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/sw.js?t=1590368958168')
    .then(function () {console.log('ServiceWorker Register Successfully.')})
    .catch(function (e) {console.error(e)});
}
</script><script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"position":"right","width":150,"height":300},"mobile":{"show":true},"log":false});</script></body>
</html>